CODEWITHSUNDEEP
javascriptjquery
Linas
Linas

Reputation: 4408

Easiest way to get element parent

Suppose i have this structure of elements:

<div class="parent">
    <div class="something1">
        <div class="something2">
            <div class="something3">
                <div class="something4"></div>
            </div>
        </div>
    </div>   
</div>

And code like this:

$(".something4").click(function(){
   //i could do it like this...
   $(this).parent().parent().parent().parent().parent();
});

But that seems to be stupid, is there a better way to do this?

also i can't just say $(.parent) because there are many divs like this with class parent in my page.

Upvotes: 1

Views: 135

Answers (5)

JoeLinux
JoeLinux

Reputation: 4307

You could always use .parentNode (standard JavaScript). It's generally a bad idea to use class names that coincide with function/variable names from the library you're using (this goes for any language). Making your class names more unique is a better approach (for instance, "scparent" instead of "parent", if the name of your application was "Super Calculator" or something). This avoids conflicts such as the one you're describing.

I would caution using .closest(), simply because you may create a function like this:

function getParentElem() {
    return $(this).closest('div');
}

And it would grab the parent div's in your code just fine, but if down the road you add a table for displaying data, and you run the function through a child element of the table, you will have to create another implementation that selects the table element, because that's what you now want:

<div id="tableParent">
    <table id="dataTable">
        <tr id="target1">
            <td>Some data.</td>
        </tr>
    </table>
</div>

By using your function getParentElem() on the tr element, you'll end up grabbing the div with id="tableParent", rather than the actual parent, which is the table element. So, unless you've delineated your parent classes appropriately all the way through your code (which can be a pain and isn't always efficient), you may run into problems. Especially if at any point you're creating elements programmatically, or reading in data from another 3rd-party library or script.

Not saying it's not good to use .closest()... just pointing out a possible "gotcha".

Upvotes: 1

user1236048
user1236048

Reputation: 5612

i would suggest adding to the div parent an id like 'parent_1' etc. and in every son you keep the id in the rel attr

<div id="parent_1" class="parent">
    <div rel="1" class="something1">
        <div rel="1" class="something2">
            <div rel="1" class="something3">
                <div rel="1" class="something4"></div>
            </div>
        </div>
    </div>   
</div>

$(".something4").click(function(){
   //i could do it like this...
   $('#parent_' + $(this).attr('rel'));
});

Upvotes: 0

ventsislaf
ventsislaf

Reputation: 1671

I think you should try this

$(this).parents(".parent");

But I don't know where on the page are the other divs with this class :)

Upvotes: 2

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124868

Use .closest():

$('.something4').click(function() {
    $(this).closest('.parent');
});

Upvotes: 3

Mathias Bynens
Mathias Bynens

Reputation: 149734

Use .closest(selector). This gets the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

$('.something4').click(function() {
  $(this).closest('.parent');
});

Upvotes: 4

Related Questions