jQuery: If the selected element $(this) has a parent with a classname of 'last'

Question

I must be missing something quite important, I have been using .parent().parent().parent().. etc to traverse down the DOM and .next().next() to traverse up the DOM.

I know this is wrong and that I need something more reliable, I need a selector that will traverse from the clicked element $(this) down the DOM to see if the element clicked is within an element with a class of "last".

div.last > div > table > tr > td > a[THE ITEM CLICKED is in the element last]

and

div > div > table > tr > td > a[THE ITEM CLICKED is not in the element last]

then if the result has length

var isWithinLastRow = [amazingSelector].length;

do something else in this case.

Try `$(this).closest('div.last')` Also.. `.parent()` and `.next()` are not the related(meaning not exact opposite). `.next()` is to fetch the next sibling and `.parent` is to go straight to the parent. The exact opposite of `.next` is `.prev`. — Selvakumar Arumugam, Jun 12 '13 at 15:05

score 22 · Accepted Answer · answered Jun 12 '13 at 15:09

Try this out:-http://jsfiddle.net/adiioo7/PjSV7/

HTML:-

<div class="last">
    <div>
        <table>
            <tr>
                <td>
                    <a>Test</a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div>
    <div>
        <table>
            <tr>
                <td>
                    <a>Test</a>
                </td>
            </tr>
        </table>
    </div>
</div>

JS:-

jQuery(function($){
    $("a").on("click",function(){
       if($(this).closest(".last").length>0)
       {
           alert("Clicked anchor with div parent class as last");
       }
    });
});

score 9 · Answer 2 · answered Jun 12 '13 at 15:05

9

Your question is a little hard to understand. You want to check if the element clicked has an ancestor element with the class last, yes?

If so, you can do so with $.fn.parents:

if ($(this).parents('.last').length) {
    // element has an ancestor element with the class "last"
}

answered Jun 12 '13 at 15:05

lonesomeday

233,373
50
316
318

1

From the comparison between `parents` and `closest` in the [latter's API](https://api.jquery.com/closest/) it looks like `closest` is faster because it stops at the first match. – Paul Sep 10 '15 at 14:03

score 3 · Answer 3 · answered Jun 12 '13 at 15:06

3

You can do this -

if($(this).closest(".last").length > 0) {
   alert("it's inside");
}

answered Jun 12 '13 at 15:06

Adil Shaikh

44,509
17
89
111

score 1 · Answer 4 · answered Jun 12 '13 at 15:05

1

You can use .closest()

var isWithLastRow = $(this).closest('div.last').length

answered Jun 12 '13 at 15:05

wirey00

33,517
7
54
65

jQuery: If the selected element $(this) has a parent with a classname of 'last'

4 Answers4

Try this out:-http://jsfiddle.net/adiioo7/PjSV7/