我可以用 jQuery 选择#id > #id 吗？答案

【问题标题】：can I select #id > #id with jQuery?我可以用 jQuery 选择#id > #id 吗？
【发布时间】：2013-01-06 19:41:20
【问题描述】：

我可以用 jQuery 选择#id > #id 吗？

我有这个结构

<div id="slide1">
    <div id="slide_body">
    some content
    </div>
</div>

<div id="slide2">
    <div id="slide_body">
    some content
    </div>
</div>

有没有办法使用 jquery 只选择 #slide1 中的 #slide_body ？

或者是将id附加到每个body div的唯一解决方案，例如

<div id="slide2">
    <div id="slide_2_slide_body">
    some content
    </div>
</div>

【问题讨论】：

标签： javascript jquery html css-selectors

【解决方案1】：

您的标记无效。不能有两个具有相同 ID 的元素。出于这个原因，答案是否定的。改用类。

<div id="slide1">
    <div class="slide_body">
    some content
    </div>
</div>

<div id="slide2">
    <div class="slide_body">
    some content
    </div>
</div>

$('#slide2>.slide_body');

【讨论】：

【解决方案2】：

同样的事情发生在我身上，我正在寻找一个解决方案，事实上这里发布的没有一个对我有用，我找到了对我有用的东西 ($('#container').find(' #child')):

var div = $('#container').find('#child4').html();
alert(div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  Container:
  <div id="child1">Child Div 1</div>
  <div id="child2">Child Div 2</div>
  <div id="child3">Child Div 3</div>
  <div id="child4">Child Div 4</div>
  <div id="child5">Child Div 5</div>
</div>

【讨论】：

【解决方案3】：

HTML 元素的 id 应该是唯一的。把幻灯片体变成一个类。

HTML

<div id="slide1">
    <div class="slide_body">
    some content
    </div>
</div>

<div id="slide2">
    <div class="slide_body">
    some content
    </div>
</div>

选择器

$("#slide1 .slide_body")

【讨论】：

【解决方案4】：

第一个问题的答案：

我可以用 jQuery 选择#id > #id 吗？

您实际上可以使用确切的语法$('#slide1 > #slidebody')。 > 字符表示直接后代，称为子选择器 (http://api.jquery.com/child-selector/)。如果元素可能不是直接后代，而是嵌套在其他元素中，则可以省略 > 并以 $('#slide1 #slidebody') 结尾。

至于 HTML sn-p 大多数都正确地提到了在不同元素上具有相同的 id 并被视为无效文档是不好的。

http://jsfiddle.net/infiniteloops/LzFAr/

【讨论】：

【解决方案5】：

首先，拥有非唯一 ID 并不是一个很好的决定。尽管如此，您可以在 jQuery 函数中传递上下文：

$("#slide_body", "#slide1")

【讨论】：

-1 表示 “不是很好的决定”。它是无效的，因此不是要做出的决定，而是要纠正的错误。解决方法是一个“错误决定”。
@flem 同意这是一个错误的决定。但是您知道 OP 使用的所有情况吗？如果某些服务器代码和 OP 生成的这个标记不能影响这个怎么办？
在这种情况下，OP 应该寻找真正问题的解决方案，在这种情况下具有非唯一标识符。如果服务器代码以这种方式生成它，请修复服务器代码。如果第三方组件以这种方式生成，请联系供应商更改组件。这里没有争论。切勿使用非唯一 ID。无效。

【解决方案6】：

使用

$('#slide1 > #slide_body')

【讨论】：

我觉得这行不通。但相反，这是：$('#slide1 #slide_body')。是因为 JQuery 版本不同吗？我正在使用 v1.11.4

【解决方案7】：

您不能在一个文档中使用唯一 ID

此属性为元素分配名称。此名称必须是唯一的在文档中。

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

在您的示例中，您可以使用“slide_body”类

<div id="slide1">
    <div class="slide_body">
    some content
    </div>
</div>

然后您可以使用#slide1 .slide_body 或$("#slide1").find('.slide_body') 选择它

【讨论】：

【解决方案8】：

您可以这样选择，但这是完全多余的，因为id 属性在页面中应该是唯一的。考虑到这一点，您当前的代码无效。您应该使用 class 来对标识符进行分组：

<div id="slide1">
    <div class="slide_body">
        some content
    </div>
</div>

<div id="slide2">
    <div class="slide_body">
        some content
    </div>
</div>

然后你会使用：

var $slideContent = $('#slide1 .slide_body');

【讨论】：

【解决方案9】：

ID 在页面上应该是唯一的。改用类：

<div id="slide1">
    <div class="slide_body">
        some content
    </div>
</div>

然后#slide1 .slide_body作为选择器。

【讨论】：

@flem 感谢您发现这一点，已修复答案。