Question

我可以选择#id＆gt; #id与jQuery？

我有这个结构

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

Answer 1

第一个问题的答案：

我可以选择#id＆gt; #id与jQuery？

你可以事实上做那种确切的语法$('#slide1 > #slidebody')。 >字符表示直接后代，称为子选择器（http://api.jquery.com/child-selector/）。如果元素可能不是直接后代但嵌套在其他内容中，则会省略>并最终得到$('#slide1 #slidebody')。

至于HTML代码段，大多数都是正确的，因为在不同的元素上使用相同的ID是不好的，并且被认为是无效的文档。

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

Answer 2

您不能在一个文档中使用唯一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')

选择它

Answer 3

使用

$('#slide1 > #slide_body')

Answer 4

您的标记无效。您不能拥有两个具有相同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');

Answer 5

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

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

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

Answer 6

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

Answer 7

您可以选择这样，但它完全是多余的，因为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');

Answer 8

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

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

Answer 9

同样的事情发生在我身上，我正在寻找一个解决方案，事实上这里发布的任何一个都不适合我，我找到了适合我的东西（$（'＃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>

我可以选择#id＆gt; #id与jQuery？

9 个答案: