jQuery的選擇，這

這裏後有一定的類第一個元素是我的小提琴： http://jsfiddle.net/jamesbrighton/wxWgG/4/jQuery的選擇，這

HTML：

<div> 
    <p class="click">Click 1</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 1</p> 
</div> 
<div> 
    <p class="target">Target 2</p> 
</div> 


<div> 
    <p class="click">Click 2</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 3</p> 
</div> 
<div> 
    <p class="target">Target 4</p> 
</div>

的jQuery：

$('.click').click(function() { 
    $(this).nextAll('.target').css('color','red'); 
});

我需要它，這樣當你點擊一個p.click，下一個p.target變爲紅色。

所以，如果你點擊'Click 1'然後'Target 1'變成紅色。如果您單擊'Click 2'，則'Target 3'變爲紅色。

以及.find我試過.closest，並從jQuery文檔看來，它似乎應該工作。正如你可以從HTML看到的，.target不是.click的孩子，以防萬一。

來源

2012-03-22 Evans

nextAll適用於兄弟姐妹，不在父母之外。所以你需要告訴我們你想如何穿越......如果你想要父母兄弟姐妹的孩子，那麼這是可能的。 – 2012-03-22 16:05:38

你的例子不是很好，它只包含一個「Click」元素。「點擊」和「目標」如何關聯？它們是否都是有序的，這意味着如果點擊第二個「點擊」，第二個「目標」是否被突出顯示等？ *編輯：*顯然你鏈接到錯誤的小提琴。這就是爲什麼你總是應該包含代碼的原因。 – 2012-03-22 16:08:03

我沒有看到「點擊1」或「點擊2」。你的代碼是最新的嗎？ – 2012-03-22 16:09:27

這裏是另一種方法，雖然我不知道在這種情況下如何執行.index()。這還假定從未有兩個連續.click元素（或表述有所不同：總有至少一個.target 2個.click元素之間的元素）：

var $elements = $('.click, .target'); 

$('.click').click(function() { 
    $elements.eq($elements.index(this) + 1).css('color','red'); 
});

DEMO

這工作，因爲該元素的選擇它們在文檔中出現的順序。

來源

2012-03-22 16:17:26

聰明而好看。 – 2012-03-22 16:42:12

您的html構造不便於訪問，直到特定目標。我們可以實現你想要的，但當你以這種方式遍歷時，腳本會變得複雜。相反，添加一個分組div，這將使您的腳本變得小巧輕鬆。

DEMO

HTML：

<div class="group"> <!-- added grouping wrapper --> 
<div> 
    <p class="click">Click 1</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 1</p> 
</div> 
<div> 
    <p class="target">Target 2</p> 
</div> 
</div> 
<div class="group"> 
<div> 
    <p class="click">Click 2</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 3</p> 
</div> 
<div> 
    <p class="target">Target 4</p> 
</div> 
</div>

JS：

$('.click').click(function() { 
    $(this).closest('.group').find('.target').css('color','red'); 
});

.nextAll工作的兄弟姐妹。在你的情況，它會尋找所有＃點擊的兄弟與.target類。

你需要的是parents -> sibling -> child。

DEMO

$('#click').click(function() { 
    $(this).parent().siblings().find('.target').css('color','red'); 
});

來源

2012-03-22 16:08:30

的2個div的'.target'，只有下一個'.target'應該變爲紅色。這使得所有'.target'變成紅色 – Ropstah 2012-03-22 16:10:38

這可以工作，但是如果我在包含p.click的div上添加另一個div，它會中斷。我想我理解爲什麼會發生這種情況，但是有沒有辦法找到某個類的下一個元素，而不管它是如何嵌套的？ – Evans 2012-03-22 16:37:17

你可以試試這個。

$('#click').click(function() { 
    var go = true; 

    var item = $(this).parent(); 

    while(go && item) { 
     var target = $('.target', item)[0]; 

     if(target != null) { 
      go = false; 
      $(target).css('color', 'red'); 
     } 

     item = $(item).next()[0]; 
    } 
});

來源

2012-03-22 16:09:46 Ropstah

此選擇你需要在你的HTML代碼的元素：

$('.click').click(function() { 
    $(this).parent("div").next('div').find('.target').css('color','red'); 
});

來源

2012-03-22 16:10:43 gpasci

你在找這個？基於更新後的HTML

$('.click').click(function() { 
    $(".target", $(this).parent().next()).css('color','red'); 
});

Updated Fiddle

來源

2012-03-22 16:11:59

這可以工作，但如果我在包含p.click的div上添加另一個div，它會中斷。我想我理解爲什麼會發生這種情況，但是有沒有辦法找到某個類的下一個元素，而不管它是如何嵌套的？ – Evans 2012-03-22 16:35:59

您的HTML必須具有固定的結構，或者您必須非常清楚地定義要涵蓋哪些情況。 jQuery無法讀取頭腦:)只要您可以定義佈局，就會有一種方法，但定義必須一致而精確。 – 2012-03-22 16:39:16

，我創造了這個小提琴：http://jsfiddle.net/wxWgG/22/

...並使用這個jQuery

$('.click').click(function() { 
    $(this).parent().next().find('p.target').css('color','red'); 
});

這是你想要的嗎？

來源

2012-03-22 16:15:48 SpaceBison

這可以工作，但如果我在包含p.click的div上添加另一個div，則會中斷。我想我理解爲什麼會發生這種情況，但是有沒有辦法找到某個類的下一個元素，而不管它是如何嵌套的？ – Evans 2012-03-22 16:36:32

你的OP中的HTML應該聲明你想要使用的HTML！看Felix Kling的答案 - 看起來這將是結構不可知的。否則，更新OP並等待另一筏更新的答案.... – SpaceBison 2012-03-22 16:39:09

jQuery的選擇，這

回答

相關問題