从 Html 的内部属性中提取值

Question

我正在学习网络开发，这是我的第一个问题。对不起，如果我以非结构化的方式提问。

我在我的项目中使用 flexslider，我想从滑块中提取一些值。

<ul class="position-list slides background-white">
    <li id="172" class="slide pointer season-selector active" data-short-year="17" data-short-desc="FW17"></li>
    <li id="173" class="slide pointer season-selector active" data-short-year="18" data-short-desc="SS18"></li>

我想获得 data-short-desc 个值。我尝试 .find 获取值，但它不起作用。

$(".position-list").find('data-short-year').val();

有什么方法可以得到这些值吗？

Answer 1

您可以尝试以下操作：-

$('.position-list li').each(function(){
var short_year = $(this).data('short-year');
});

Answer 2

data-short-year 是属性，不是元素。

您需要一个属性选择器：.find('[data-short-year]')

那么您要获取属性的内容，而不是表单控件的当前值。

通常，您会使用 attr()，但 data-* 比较特殊：.data('short-year').

Answer 3

I get a JSON and then on the value I get, I am trying to sort them

这与您的问题标题不同。为此，您可以使用 sort() 方法：

$('.position-list li').sort(function(a, b) {
  return $(a).data('short-year') > $(b).data('short-year');
}).appendTo('.position-list');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="position-list slides background-white">
  <li id="173" class="slide pointer season-selector active" data-short-year="18" data-short-desc="SS18">
    SS18 - 18
  </li>
  <li id="172" class="slide pointer season-selector active" data-short-year="12" data-short-desc="Bar12">
    Bar - 12
  </li>
  <li id="172" class="slide pointer season-selector active" data-short-year="10" data-short-desc="Foo10">
    Foo - 10
  </li>
  <li id="172" class="slide pointer season-selector active" data-short-year="17" data-short-desc="FW17">
    FW17 - 17
  </li>
</ul>

从 Html 的内部属性中提取值

Extract value from inner attribute of Html

html

javascript

jquery

flexslider