Question

我想选择一个带有选择器的元素，并选择最接近<p>的元素（注意p不与前一个元素嵌套）。我该怎么办？我尝试了closest()，但只有在元素嵌套时才有效。

编辑：最接近的定义：

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

在这种情况下，我会选择p#1，假设#myelement是相关元素。

Answer 1

鉴于你的HTML是：

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

closest()不起作用的原因是：

获取与选择器匹配的第一个元素，从当前元素并通过DOM树进行向上。

如果'p'标记始终是下一个元素，请使用next()：

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

但是，如果你最终可以在a和第一个p标记之间添加任何其他元素，那么获取它的方法之一就是使用nextAll()

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

还有很多其他方法可以为您提供<p>元素。

Answer 2

您可以在案例中使用.siblings()或.next()，但如果您的数据始终采用您发布的格式，我相信.next将是更好的选择。

以下是一个例子：

<强> 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);
});

您会看到上述两个控制台日志的报告和ID都是1。

<强> EXAMPLE

Answer 3

http://jsfiddle.net/gpinto/PTFgG/1/

function findFirstParagraph() {

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

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

}

Answer 4

尝试使用next() http://api.jquery.com/next/

根据最新的OP编辑：jsfiddle.net/KXPwx/9

Answer 5

你试过.next（）或.prev（）..也许使用.eq（0）??

您也可以使用.parent（）或.parents（'。selector'）

Answer 6

尝试.find()

有很多功能可以做类似的事情，但对我来说，使用像$(this).find( 'selector here' )或$(' id or class selector here').find('id/class here')之类的东西可以解决这个问题。

祝你好运

选择某种类型的最接近元素--JQuery

6 个答案: