Extract value from inner attribute of 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

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>

Answer 2

You can try following:-

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

Answer 3

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').