Choose the last element that has a particular class

Let's say I am working with an unordered list like this one:

<ul>
   <li class="item"></li>
   <li class="item"></li>
   <li class="item"></li>
   <li class="placeholder"></li>
</ul>

As part of my ordering process, I need to sort the .item elements and if the last one is in the list, move it to a different list. Normally, I would use :last-child for selecting the last item. However, when there is a .placeholder, the selection gets confused by it and doesn't recognize the actual last item correctly. How can I ensure that only the last .item is selected?

jqueryhtmlcssjquery-selectorscss-selectors

Answer №1

To select the last item element, you can use either the :last selector or the .last() method:

$('.item:last');//will return the third li element

Alternatively,

$('.item').last();//will return the third li element

Answer №2

Opt for the final one:

$('.item:last');

Keep in mind that :last chooses a lone element by sifting through the existing jQuery collection and selecting the last element within it.

If performance is a priority, consider using:

$(".item").filter(":last");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the CSS class of a <TD> element depending on the value of the column using JavaScript

I am working on a grid where I need to dynamically change the CSS of one of the columns based on the value from another field in the result set. Instead of simply assigning a class like <td class='class1'> ${firstname} </td> I ...

javascriptcsshtml-table

Make an ajax call without any parameters and then in PHP, verify if the variable is

I have a code snippet that is currently functional. I am looking to remove the URL and handle the AJAX request on the same page. Since no data is being sent, how can PHP be used to determine when the AJAX function is ready to send a request to the database ...

phpjqueryajax

The button event is currently only targeting the initial class. (Jquery)

I am having an issue where only the first instance of the saveBtn class is being saved into local storage when clicked. Can anyone provide some assistance with this? Here is the HTML: <div class="hour-container" id="8am"> & ...

javascripthtmljquery

What could be causing the jQuery slidedown to malfunction within my table?

My slider is not working when I include a table on my website. The slider works fine without a table, but I need to display members in a table format. Can anyone help me identify the issue with my code? The information needs to be displayed below the nam ...

javascriptjqueryhtmlcss

Tips for separating <td> tags within a series of <td>

I am working with the HTML code provided below. <tr> <td class="slds-cell-wrap" data-label="">Category</td> <td class="slds-cell-wrap break" data-label=""><strong> Test </strong></td> <td clas ...

htmlcsshtml-table

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

javascripthtmlcsstwitter-bootstrap-3

What approach should I take to properly naming a navbar structure using BEM methodology?

Here is a snippet of SASS code that I need help transforming using the BEM methodology. How can I rewrite this block of code to follow the BEM naming conventions? .nav__primary ul { border-top: 2px solid $darkgreen; display:block; margin:10p ...

csssassbem

iOS does not support Css3 Transition

My Transition Code works on PC and android devices, but it does not work on iOS devices. I am only using HTML and CSS. /***** BOX 3 *****/ #box3 { height:240px; width:198px; border:1px solid #dedede; background-color:#fcfcfc; position:relative; overflow:h ...

htmlioscss

JavaScript not populating data in ASP TextBox or Input field

<asp:TextBox ID="DataBus" runat="server"></asp:TextBox> This is a text box element that is currently not being populated with any data from JavaScript. $("#DataBus").val('hi'); Even after trying the HTML code below, the issue persi ...

javascriptjqueryasp.net

The concatenation of Ajax results appears to append to the existing data

My ajax function handles uploading comments to a form, which then returns the same string. If successful, the comment is added to a comment box and the input text is cleared. The issue arises when a user adds another comment; the new comment is appended w ...

javascriptphpjqueryajax

Collapse the borders of Angular's div layout container

I need help with collapsing the borders of div containers when generating a table using angular material's layout system. To see what I have done so far, please refer to my jsfiddle linked below: Jsfiddle Below is the HTML code snippet. Any guidance ...

htmlcssangularjs

Sliding and repositioning elements using jQuery

My goal is to build a simple slideshow for learning purposes. I want the list items to slide automatically to the left in a continuous loop. I've written some code that makes the slides move, but I'm struggling to set the correct position for ea ...

javascriptjqueryhtmlcss

Tips for Utilizing Environmental Variables within a Vue Application's index.html File

My website has an index file with all the necessary meta tags, stylesheets, and scripts: <!DOCTYPE html> <html lang="en"> <head> <!-- Required Meta --> <meta charset="UTF-8"> <meta http-equi ...

javascripthtmlvue.jsvite

Identify input elements that specifically contain an onclick event

Several of the input elements on my page have a function called setSomeFunction() that either shows or hides certain divs when clicked. I know I can locate all the input elements using document.getElementsByTagName("input") and store them in an array. How ...

javascripthtmlgetelementsbytagname

Pressing a button through xpath

I am attempting to click on the button below: <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <div class="ui-dialog-buttonset"> <button class="ui-button ui-widget ui-state-default ...

pythonhtmlseleniumxpath

How to use AngularJS ng-repeat to generate a mailto hyperlink

Currently, I am displaying our user list using ng-repeat. <div ng-repeat="User in ac.Users | filter:ac.Search | limitTo:ac.Limit" style="{{ac.Users.indexOf(User)%2 == 0 ? 'background-color:#f2f2f2' : 'background-color:white' } ...

htmlcssangularjsangularjs-ng-repeat

`Exploring the magic of CSS image overlay feature`

I would appreciate it if you could walk me through the implementation of this overlay code... .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ...

css

Finding specific data within a nested HTML name array using either JQuery or JavaScript based on the second level key

Is there a way to target all input elements with names that contain 'pref[*][location][]' using a jQuery selector or JavaScript? Specifically, I want to retrieve those inputs based on the 'location' key in the second level. <input ty ...

javascriptjquery

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

I have successfully implemented a delete function in JavaScript that deletes rows, but I also want to remove the data from local storage. This way, when a user reloads the page, the deleted row will not appear. The goal is to delete the data from local s ...

javascripthtmljavascript-objects

Incorporating the database ID of an element into HTML to facilitate Ajax requests

Consider the following code snippet: <div id="256"> <p>SOMELEMENT</p> <button class="edit">EDIT</button> <button class="delete">DELETE</button> </div> <div id="257"> <p>SOMELEMENT2< ...

javascripthtmlajax