locked
.eq() with .remove() RRS feed

  • Question

  • User-1826049516 posted

    Hi,

    I am finding that .eq() references are bound to before the remove(). i.e:

    <div>
    	<span>One</span>
    	<span>Two</span>
    	<span>Three</span>
    </div>
    $( "div" ).find( "span" ).eq( 0 ).remove().end().eq( 1 ).addClass( "class" );

    Doesn't work. This adds the class to the 2nd element as before the remove, i.e. span two when it should now be span three. If I go back and redo the .find() and .eq() it works:

    $( "div" ).find( "span" ).eq( 0 ).remove().end().end().find( "span" ).eq( 1 ).addClass( "class" );

    Is this the expected behavior?

    Sunday, June 16, 2019 6:48 PM

All replies

  • User839733648 posted

    Hi ldoodle,

    According to your description, I suggest that you should pay attention to the explanation of .end().

    Description: End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

    Though you remove the first span, you have to find the former third span using eq(2).

    You could see that from the following example.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                 $("div").find("span").eq(0).remove().end().eq(2).addClass("red");
                 //$("div").find("span").eq(0).remove().end().eq(1).addClass("red");        
            })
        </script>
        <style>
            .red{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <span>One</span>
            <span>Two</span>
            <span>Three</span>
        </div>
    </body>
    </html>

    result:

    You could also using F12 developer tool to check the operation like:

    Best Regards,

    Jenifer

    Monday, June 17, 2019 2:32 AM
  • User-2054057000 posted

    The working is correct. Your code should be in 2 steps, see below:

    <div>
    	<span>One</span>
    	<span>Two</span>
    	<span>Three</span>
    </div>
    $( "div" ).find( "span" ).eq( 0 ).remove();
    $( "div" ).find( "span" ).eq( 1 ).addClass( "class" );

    This way the .eq() method will add the css class to the 3rd span element.

    Monday, June 17, 2019 4:12 AM
  • User-1826049516 posted

    The problem with that is although I have 3 elements, I am removing either the first one or last one, depending on something else, then hiding the resulting 2nd element.

    So the resulting html would be:

    <div>
    	<span class="">One</span>
    	<span class="hidden">Two</span>
    </div>

    or:

    <div>
    	<span class="">Two</span>
    	<span class="hidden">Three</span>
    </div>

    If I hard coded for .eq( 2 ).remove() only the third span would actually be hidden.

    $( this ).find( "img" ).eq( modal.find( "[name='attendees'] [data-personid='" + $( this ).data( "personid" ) + "']" ).length ? 0 : 2 ).remove().end().end().find( "img" ).eq( 1 ).addClass( "hidden" );

    Monday, June 17, 2019 8:48 AM
  • User-1826049516 posted

    The working is correct. Your code should be in 2 steps, see below:

    <div>
    	<span>One</span>
    	<span>Two</span>
    	<span>Three</span>
    </div>
    $( "div" ).find( "span" ).eq( 0 ).remove();
    $( "div" ).find( "span" ).eq( 1 ).addClass( "class" );

    This way the .eq() method will add the css class to the 3rd span element.

    Yeah which is effectively what I get with my "answer", albeit with chaining.

    Monday, June 17, 2019 8:49 AM
  • User839733648 posted

    Hi ldoodle,

    Yes, you are right.

    As my example above, you could see that though I remove the first span, the index of the second span(the new first span) is still the second.

    the second span(the new first span):eq(1)

    the third span(the new second span):eq(2)

    So it is as you said, the .eq() references are bound to before the remove().

    Best Regards,

    Jenifer

    Tuesday, June 18, 2019 8:48 AM
  • User-2054057000 posted

    ldoodle

    yogyogi

    The working is correct. Your code should be in 2 steps, see below:

    <div>
    	<span>One</span>
    	<span>Two</span>
    	<span>Three</span>
    </div>
    $( "div" ).find( "span" ).eq( 0 ).remove();
    $( "div" ).find( "span" ).eq( 1 ).addClass( "class" );

    This way the .eq() method will add the css class to the 3rd span element.

    Yeah which is effectively what I get with my "answer", albeit with chaining.

    This is because the when you remove the first span, the index of the second span(the new first span) is still the second.

    Wednesday, June 19, 2019 3:18 AM