找到正确的孩子

Question

说我是否有以下代码块

<div id='demo'>
    <div class='ui-demo first'>
        <p></p>
    </div>
    <div class='ui-demo second'>
        <p></p>
    </div>
<div>

以下方式是否正确到达＆＃39; p＆＃39;使用＆＃39; ui-demo second＆＃39;类？

$('#demo').find('.ui-demo second').find('p')

或者这条线也能用吗？

$('#demo').children('.ui-demo second').find('p')

我尝试了console.log，但我不确定它是否正常工作。我想在p标签中附加一个列表，但仅针对第二个子节点的p，而不是第一个子节点。

由于

Answer 1

你应该试试，

$('#demo').find('.ui-demo.second').find('p');
// no space -------------^ in both the classes, as second is not ui-demo's child

或使用单个find()之类的

$('#demo').find('.ui-demo.second p');

阅读hierarchy-selectors以了解其工作原理。

Answer 2

如果您使用find('.ui-demo second')，则尝试获取<second>元素的子元素.ui-demo。 而是使用：

$('#demo').find('.ui-demo.second').find('p')

选择同时具有.ui-demo

类的.second元素

Answer 3

不应该有任何空间：

$('#demo .ui-demo.second').find('p')

或

$('#demo').find('.second p')

除此之外你也可以使用它：

$('#demo .ui-demo:first').next('div').find('p')

Answer 4

$('.ui-demo.second > p').text("some data for paragraph");

Demo

由于你想附加一个列表，你可以通过

来完成

$('.ui-demo.second > p').append("<ul><li>1</li><li>2</li></ul>");

Demo 2

如果您有一些其他元素具有与上面使用的相同的类名，那么请尝试更具体地使用您的选择器。看看其他人从#demo开始选择的答案，但是如果您确定HTML页面中没有其他类具有这样的名称，那么我给出的解决方案就足够了，少了计算。