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 标签元素内的标签文本，但它不起作用......是否有我缺少的东西......？我还没有改变 fiddle ，但由于它只是一个示例，而且标签没有被使用，为了简单起见，我让它保持原样

Answer 1

你的 jQuery 应该可以正常工作。在这种情况下，问题在于您的标记。 p element只能包含“phrasing content ”。 div 元素不属于短语内容，因此浏览器将尽力通过移动内容来处理您的标记。

Chrome 只需移动 p 元素即可成为 div 的上一个同级元素。

要解决此问题，您需要更改标记。您最好的选择可能是将 p 元素更改为另一个 div。请参阅updated fiddle .

<小时/>

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

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