Question

新手在这里，我有这个HTML

<p>
    <div id="divTest">foo</div>
</p>
<p>
    <span>bar</span> 
    <span>bar</span><!-- make this 'bar' red -->
</p>

从div＃divTest

开始，我找不到第二种方法

试过这个 $("#divTest").parent().next('p').children('span:nth-child(1)').css("color","red");但无效

请帮忙

jsfiddle在这里 http://jsfiddle.net/Vc36P/3/

Answer 1

$(function(){
    $("#divTest").click(function(){
        $(this).parent().find('span').eq(1).css('color','red')
    }); 
});

JS Fiddle demo

您遇到的问题是div元素中不能包含p，这是无效的HTML;因此，浏览器在构造DOM时，会（不可预测地）将div移到p之外（虽然事先不清楚，但在哪里）。您需要首先构建有效的HTML：

<div id="divTest">foo</div>
<p>
    <span>bar</span> 
    <span>bar</span><!-- make this 'bar' red -->
</p>

允许：

$(function(){
    $("#divTest").click(function(){
        $(this).next('p').find('span').eq(1).css('color','red')
    }); 
});

JS Fiddle demo

参考文献：

Answer 2

嗨，我希望它有所帮助.. http://jsfiddle.net/Vc36P/6/

$(function(){
    var a = $("p span").eq(1).css('color','red'); 

});

Answer 3

这不是正确的html语法，因为无法在<div>中将<p>元素放在DOM中，因为开始标记会自动关闭<p>元素。

<p><div></div></p>不是有效的HTML，浏览器完全有权通过在<p>之前关闭<div>来尝试纠正它：

<p></p><div></div><p></p>

您不能将<div>放在<p>内，并从各种浏览器中获得一致的结果。为浏览器提供有效的HTML，它们会表现得更好。

您可以将<div>放在<div>内，但如果您将<p>替换为<div class="p">并对其进行适当设置，则可以获得所需内容。

例如，请参阅http://www.w3.org/TR/html4/sgml/dtd.html。它指定哪些元素是块元素，哪些元素是内联元素。对于这些列表，请搜索标记为“HTML内容模型”的部分。

对于P元素，它指定以下内容，表示P元素仅允许包含内联元素。

<!ELEMENT P - O (%inline;)*            -- paragraph -->

这与http://www.w3.org/TR/html401/struct/text.html#h-9.3.1一致，它表示P元素“不能包含块级元素（包括P本身）。”

Answer 4

最好的方法是使用某个类或ID标记您的跨度或p容器：

<p>
    <div id="divTest">foo</div>
</p>
<p class="colors">
    <span class="blue">bar</span> 
    <span class="red">bar</span><!-- make this 'bar' red -->
</p>

并通过此classname或id找到它：

$(function(){
    $(".colors .red").css({'color': 'red'}); 
});

jsfiddle

jQuery find元素：请帮助使这个跨度（'bar'）变红（jsfiddle）

4 个答案: