選擇某種類型的最接近元素-JQuery

Question

我想使用一些選擇器選擇一個元素，然后選擇最接近它的<p>元素（請注意，p不與前一個元素嵌套）。 我該怎么做？ 我嘗試過closest() ，但這僅在元素嵌套的情況下有效。

編輯：最接近的定義：

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

在這種情況下，假設#myelement是所討論的元素，則將選擇p#1 。

Answer 1

鑒於您的HTML是：

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

最接近（）無效的原因是：

獲取與選擇器匹配的第一個元素，從當前元素開始， 一直到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 。

例

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')可以解決問題大聲笑。

祝好運