The lesser than sign selector

Question

The lesser than sign selector

Here is the code snippet that I am currently working with:

$(function() {
    $('li:lt(5)').css("background", "red");
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="listes">
    <ul id="ul1">
        <li>
            Element de liste 1
            <ul id="ul2">
                <li>Enfant 1</li>
                <li>Enfant 2</li>
            </ul>
        </li>
        <li>Element de liste 2</li>
        <li>Element de liste 3</li>
        <li>Element de liste 4</li>
    </ul>
</div>

I was expecting both of the last two li's to remain unaffected, but only the very last one remained unchanged.

(As per the documentation: The :lt() selector targets all elements at an index less than the specified index within the matching set.)

Can someone explain why this behavior is occurring?

jquery html css

Answer 1

Answer №1

The starting point is always zero. If you want to target the initial five elements, you can achieve this by using:

$('li:lt(4)')

Courtesy of jQuery Documentation for :lt() selector:^{(Highlight added)}

indexFromEnd: Starting from zero, counting in reverse order from the last item.

Remember that JavaScript arrays follow a zero-based numbering system, hence these selectors are aligned with that standard. This explains why $( ".myclass:lt(1)" ) picks the first element in the document with the class myclass, instead of returning nothing. On the other hand, :nth-child(n) uses a one-based index to comply with CSS conventions.

$(function() {
  $('li:lt(4)').css("background", "red");
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="listes">
  <ul id="ul1">
    <li>
      List Element 1
      <ul id="ul2">
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>List Element 2</li>
    <li>List Element 3</li>
    <li>List Element 4</li>
  </ul>
</div>

Answer 2

The starting point is always zero. If you want to target the initial five elements, you can achieve this by using:

$('li:lt(4)')

Courtesy of jQuery Documentation for :lt() selector:^{(Highlight added)}

indexFromEnd: Starting from zero, counting in reverse order from the last item.

Remember that JavaScript arrays follow a zero-based numbering system, hence these selectors are aligned with that standard. This explains why $( ".myclass:lt(1)" ) picks the first element in the document with the class myclass, instead of returning nothing. On the other hand, :nth-child(n) uses a one-based index to comply with CSS conventions.

$(function() {
  $('li:lt(4)').css("background", "red");
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="listes">
  <ul id="ul1">
    <li>
      List Element 1
      <ul id="ul2">
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
    <li>List Element 2</li>
    <li>List Element 3</li>
    <li>List Element 4</li>
  </ul>
</div>

The lesser than sign selector

Answer №1

Similar questions

What is the method for ensuring that a badge is consistently in a circular shape?

Grails Error: Cannot find method signature for org.apache.catalina.core.ApplicationHttpRequest.getFile()

Encountering Issues with Formatting InnerHtml Text using RegEx

How can I place a DOM element without relying on style properties?

The image does not properly scale within the div as it rotates

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Tips for formatting numerical output in EJS by rounding the value

Leveraging the power of WCF Data Service and jQuery in harmony for seamless CRUD operations

Annoying blank space triggered by custom jQuery validation error labels

What could be causing my ASP.Net MVC script bundles to load on every page view?

Guide to customizing the CSS styles of various components within a Material UI Dialog

Is the dropdown menu fully functional in the latest release of Bootstrap?

Hit the space key after the button has been pressed

Is there a way to verify if text was generated using CSS?

When the ESC key is pressed during a keyup event, the value of event.which is determined to be

Is there a way I can programmatically fetch my operating system reputation and number of badges from the command line?

How to use Typescript to catch the open event of a Bootstrap 4 modal

Troubleshooting problem with width in CSS for Apple iPhones

Any tips on how to retrieve parameters from a $.post request?

swapping out CSS files on the content page