javascript - Select closest element of certain type - JQuery - Stack Overflow

admin管理员组

文章数量:1334957

I want to select an element with some selector, and the select the closest <p> element to it (note that the p is not nested with the former element). How would I do that? I tried closest(), but that only works if the element is nested.

EDIT: a definition of closest:

<a id="myelement"></a>
<p id="1"></p>
<p id="2"></p>

In this case, p#1 would be selected, assuming #myelement is the element in question.

I want to select an element with some selector, and the select the closest <p> element to it (note that the p is not nested with the former element). How would I do that? I tried closest(), but that only works if the element is nested.

EDIT: a definition of closest:

<a id="myelement"></a>
<p id="1"></p>
<p id="2"></p>

In this case, p#1 would be selected, assuming #myelement is the element in question.

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Sep 21, 2012 at 19:17 user1689591 asked Sep 21, 2012 at 19:04 user1689591user1689591 2311 silver badge55 bronze badges 6

• api.jquery./nextUntil – Saad Imran. Commented Sep 21, 2012 at 19:05
• 2 "closest" in what way? Could you provide an example html structure? – MrOBrian Commented Sep 21, 2012 at 19:07
• That would return me all of the <p>s. I just need the closest one. – user1689591 Commented Sep 21, 2012 at 19:08
• 7 closest parent? closest sibling? closest cousin? closest child? – Kevin B Commented Sep 21, 2012 at 19:08
• @SaadImran.: not sure nextUntil would work. According to the docs: Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed. That would not include the <p> element when specified as a selector. – Nope Commented Sep 21, 2012 at 19:35

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 4

Given your HTML is:

<a id="myelement"></a>
<p id="1"></p>
<p id="2"></p>

The reason closest() doesn't work is because:

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

Use next() instead if the 'p' tag will always be the next element:

$('#myelement').next();

However, if you could end up with any additional elements in-between the a and the first p tag than one of the ways to get it is to use nextAll()

$('#myelement').nextAll('p').eq(0);

There is many other ways to get that <p> element for you.

You can use either .siblings() or .next() in your case, but I believe .next would be the better choice if your data is always in the form you posted.

Here's an example:

HTML

<a id="myelement">a</a>
<p id="1">1</p>
<p id="2">2</p>

jQuery

$("#myelement").click(function(){
    console.log($(this).next("p").attr("id"));
    console.log($(this).siblings("p")[0].id);
});​

You'll see that both of the above console logs report and id of 1.

EXAMPLE

http://jsfiddle/gpinto/PTFgG/1/

function findFirstParagraph() {

   var siblings = $('#myElement').siblings();

    siblings.each(function(index) {
        if ( $(this).attr('id') == 1) {
            $(this).css('background-color', 'red');
        }
    });

}​

You tried .next() or .prev().. Maybe use .eq(0)??

You can also use .parent() or .parents('.selector')

try using next() http://api.jquery./next/

as per the latest OP edit: jsfiddle/KXPwx/9

try .find()

there are many functions that do similar things but for me, using something like $(this).find( 'selector here' ) or $(' id or class selector here').find('id/class here') works wonders lol.

Good luck

本文标签： javascriptSelect closest element of certain typeJQueryStack Overflow