从HTML的内部属性中提取值

Question

I am learning web development and this is my first questions. Sorry if I ask in unstructured manner.

I am using flexslider in my project and I want to extract some values from slider.

<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>

I want to get data-short-desc values. I tried .find to get values but it doesn't work.

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

Is there any way to get those values?

Answer 1

You can try following:-

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

Answer 2

data-short-year is an attribute, not an element.

You need an attribute selector: .find('[data-short-year]')

Then you are looking to get the content of the attribute, not the current value of a form control.

Normally, you would use attr() , but data-* is special: .data('short-year') .

Answer 3

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

This is different to the title of your question. To achieve this you can use the sort() method:

 $('.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>