0

新手，我有这个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/

4

4 回答 4

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

JS 小提琴演示。

您遇到的问题是 adiv不能包含在p元素中，这是无效的 HTML；因此，浏览器在构建 DOM 时会（出乎意料地）移动 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 小提琴演示。

参考：

于 2013-10-29T12:49:05.393 回答
0

嗨，我这样做了，希望对您有所帮助.. http://jsfiddle.net/Vc36P/6/

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

});
于 2013-10-29T12:49:38.147 回答
0

最好的方法是用一些类或 id 标记你的 span 或 p-container：

<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>

并通过这个类名或 id 找到它：

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

jsfiddle

于 2013-10-29T13:01:56.870 回答
0

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

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

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

您无法将 a<div>放入 a<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 本身）”。

于 2013-10-29T12:59:30.473 回答