Jquery獲得下一個兄弟

我在使用jquery獲取兄弟元素時遇到了一些問題。我會盡力解釋。Jquery獲得下一個兄弟

以下是我目前正在使用的HTML ..

<p class="paraclass1" id="amazing1"> 
    <span class ="pascal1"> 
    <div class='pascal'> 
     <INPUT id= "chk1" value="on" type="checkbox" /> 
    </div> 
    </span> 
</p> 
<p> 
    <label class='lblclass'>this is a label </> 
</p>

我想做些什麼是導航並找到所有存在於第二p標籤的孩子（現在僅標籤存在）。以下是我的工作jQuery代碼..

$('#chk1').click(function(){ 
    alert($(this).parents('p#amazing1').next().children().length) 

// alert($('#chk1').parent().parent().attr('class')); 
});

http://jsfiddle.net/gj1118/vWQxD/5/

任何幫助，將不勝感激。

感謝

編輯我現在正在試圖讓這就是第二個p標籤元素內，其不工作....標籤的文字是有，我失去了一些東西..？我還沒有改變小提琴，但因爲它只是一個樣本，並且由於標籤沒有被使用，爲了簡單起見，我仍然保持它的樣子。

來源

2012-12-17 Gagan

當我改變了div來的跨度小提琴的工作：http://jsfiddle.net/vWQxD/6/- 大概是因爲你不應該在跨度中包含div。還要注意''.closest（）'是比'.parents（）'更好的選擇，因爲你正在做的事情。 – nnnnnn

您的jQuery應該可以正常工作。這種情況下的問題是您的標記。 p element只能包含「phrasing content」。 div元素不會被分類爲短語內容，因此瀏覽器將盡最大努力通過移動事物來處理您的標記。

Chrome只是移動p元素成爲div的前兄弟。

要解決此問題，您需要更改標記。您最好的選擇可能是將p元素更改爲另一個div。請參閱updated fiddle。

旁註。您可能需要考慮將.parents()呼叫更改爲.closest()呼叫。如果.parents()方法與選擇器匹配，則可以返回多個元素。在這種情況下，這是不可能的，但在維護的利益，也可能是一個很好的變化：

$(this).closest('#amazing1').next().children().length

來源

2012-12-17 21:16:49

你可以看到瀏覽器如何在這裏移動它：http://jsfiddle.net/vWQxD/7/ – nnnnnn

我認爲只要它看到一個div標籤就關閉p標籤。 –

@SalmanA - 是的，這正是它所做的，用比我說的更好的方式說出來！ –

Jquery獲得下一個兄弟

回答

相關問題