CODEWITHSUNDEEP
jquery
some_bloody_fool
some_bloody_fool

Reputation: 4685

Is there an efficient way to iterate through parent elements so i do not repeat .parent() in JQuery?

Right now i am successfulling getting the value of an element by doing this:

var id = $(this).parent().parent().parent().parent().attr('id').toString();

However, I am now finding that i am going to have to continue getting values like this and was wondering if there is a more efficient way to look through parent elements for a given element.

Below i tried this, but it does not work:

var id = $(this).parent(4).attr('id').toString(); ???

Upvotes: 0

Views: 2902

Answers (7)

Jeff
Jeff

Reputation: 14279

.parents() accepts an optional selector so you can do things like this:

$(this).parents('#some-ancestor')

and this will iterate through all parents and return elements matching #some-ancestor

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

You can use .parents():

Description: Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

Given this HTML:

<div id="4">
    <div  id="3">
        <div  id="2">
            <div id="1">
                <span>text</span>
            </div>
        </div>
    </div>
</div>​

The use of .parents() with :eq():

$('span').parents(':eq(2)').attr('id') // returns "3"

Note: the use IDs is just for demonstration purposes

DEMO

Upvotes: 1

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

Use Closest().

Closest will search the DOM from current DOM towards the upper root of your page (passing by all parents). so this should be enough to stop typing parent().parent() and just provide the selector for your desired root element.

Upvotes: 0

nicosantangelo
nicosantangelo

Reputation: 13726

You could use .closest(selector) or .parents(selector) to get to an element by a selector like

var id = $(this).closest(".class").attr('id').toString(); //returns the first element that finds with that class

var id = $(this).parents(".class"); //returns an array of elements with that class

here are the docs: closest, parents

Upvotes: 1

jfriend00
jfriend00

Reputation: 707706

See the jQuery doc for .closest(selector). It goes up the ancestor chain (1 or more parents) until it finds a parent that matches the selector you passed. It's usually a much better way of doing things than multiple calls to .parent() because it goes to the target regardless of how many intervening parents there are and will even continue to work if the number of intervening parents changes as the HTML is slightly modified.

Your code would change to this:

var id = $(this).closest(selector).attr('id').toString();

You'd have to fill in the selector to be the desired class, id or tag name or some combination of those.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382806

The closest is what you are looking for.

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You should use closest()

 var id = $(this).closest('#idofyourelement').attr('id').toString();

so you justneed to specify the id of the element you are lloking and closest() will

Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

EDIT of course if you don't know the id you can use a class

 var id = $(this).closest('.classOfYourElement').attr('id').toString();

Upvotes: 7

Related Questions