Jquery得到了下一个兄弟姐妹

Question

我在使用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标签元素内的标签文本,但它不起作用....是否有一些我缺少的东西..？我还没有改变这个小提琴,但由于它只是一个样本,因为标签没有被使用,我为了简单起见让它保持这样

Answer 1

你的jQuery应该可以正常工作.这种情况下的问题是你的标记.该p元素只能包含" 措辞内容 ".该div元素不被归类为措词内容,因此浏览器将尽最大努力通过移动来处理您的标记.

Chrome只是移动p元素成为之前的兄弟div.

要解决此问题,您需要更改标记.您最好的选择可能是将p元素更改为另一个元素div.看到一个更新的小提琴.

旁注.您可能需要考虑将.parents()呼叫更改为.closest()呼叫.如果.parents()方法与选择器匹配,则该方法可以返回多个元素.在这种情况下,这是不可能的,但为了可维护性,它可能是一个很好的变化:

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