CODEWITHSUNDEEP
javascriptjquery
dee cheok
dee cheok

Reputation: 257

How do I find the last element with a specific class

I have the following HTML

<ul id="productCategory-ul" class="productCategory__ul">
<li><figure class="productCategory__ul__li" data-id="1"></figure></li>
<li><figure class="productCategory__ul__li" data-id="2"></figure></li>
<li><figure class="productCategory__ul__li" data-id="3"></figure></li>
<li><figure class="productCategory__ul__li" data-id="4"></figure></li>
</ul><!-- end of brandContent__ul -->

My intention is to get the last <li>'s figure data-id.

<li><figure class="productCategory__ul__li" data-id="4"></figure></li>

How do I get productCategory__ul__li last data-id?

I don't want to use productCategory-ul to find my last li, I wanted to use $each or use productCategory__ul__li to find it.

Upvotes: 1

Views: 1929

Answers (5)

Rounin
Rounin

Reputation: 29511

Bear in mind that jQuery is simply a javascript library.

The point of the jQuery library is "write less, do more" - it is intended to help you achieve a great deal by writing only short snippets of code.

For something like this, you could write this in jQuery:

$(document).ready(function(){
    var jQueryLastDataID = $('.productCategory__ul__li:last').attr('data-id');
});

Though, arguably, it would barely take any longer to write this in plain javascript:

var dataIds = document.querySelectorAll('.productCategory__ul__li');
var javascriptLastDataID = dataIds[(dataIds.length - 1)].dataset.id;

Working example:

$(document).ready(function(){
    var jQueryLastDataID = $('.productCategory__ul__li:last').attr('data-id');
    console.log('jQueryLastDataID is ' + jQueryLastDataID);
});

var dataIds = document.querySelectorAll('.productCategory__ul__li');
var javascriptLastDataID = dataIds[(dataIds.length - 1)].dataset.id;
console.log('javascriptLastDataID is ' + javascriptLastDataID);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="productCategory-ul" class="productCategory__ul">
<li><figure class="productCategory__ul__li" data-id="1"></figure></li>
<li><figure class="productCategory__ul__li" data-id="2"></figure></li>
<li><figure class="productCategory__ul__li" data-id="3"></figure></li>
<li><figure class="productCategory__ul__li" data-id="4"></figure></li>
</ul><!-- end of brandContent__ul -->

Upvotes: 0

avilac
avilac

Reputation: 802

Here you go: 

  $(document).ready(function(){

            $( ".productCategory__ul__li" ).last().addClass( "lastButNotTheLeast" );

     });

Hope it helps!

Upvotes: 0

Abhi
Abhi

Reputation: 4271

You may do:

jQuery(".productCategory__ul__li").last().data("id");

There is no need to go for each or use ul. This code jQuery(".productCategory__ul__li") selects all the elements with the given class.

last() would select the last element from the element's array.

data would pick up the data attributes(here id).

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4462

You can get the last child of li's.

$('.productCategory__ul__li:last-child')

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

You can use the :last selector (or the last() method) to retrieve the last element in a matched set:

var id = $('.productCategory__ul__li:last').data('id');
   // or $('.productCategory__ul__li').last().data('id');


var id = $('.productCategory__ul__li:last').data('id');
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="productCategory-ul" class="productCategory__ul">
  <li>
    <figure class="productCategory__ul__li" data-id="1">id = 1</figure>
  </li>
  <li>
    <figure class="productCategory__ul__li" data-id="2">id = 2</figure>
  </li>
  <li>
    <figure class="productCategory__ul__li" data-id="3">id = 3</figure>
  </li>
  <li>
    <figure class="productCategory__ul__li" data-id="4">id = 4</figure>
  </li>
</ul>

Upvotes: 3

Related Questions