Javascript 我可以用 jQuery 选择 #id > #id 吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14477818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 16:55:03  来源:igfitidea点击:

can I select #id > #id with jQuery?

javascriptjqueryhtmlcss-selectors

提问by Matt Welander

can I select #id > #id with jQuery?

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

I've got this structure

我有这个结构

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

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

Is there a way to select, using jquery, only the #slide_body inside #slide1?

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

Or is the only solution to append the id to each body div like

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

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

采纳答案by Larry Cinnabar

You can't use unique IDs in one document

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

This attribute assigns a name to an element. This name must be unique in a document.

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

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

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

In your example you may use class "slide_body"

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

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

And then you can select it with #slide1 .slide_bodyor $("#slide1").find('.slide_body')

然后你可以选择它#slide1 .slide_body$("#slide1").find('.slide_body')

回答by Gary.S

The answer to the first question:

第一个问题的答案:

can I select #id > #id with jQuery?

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

You can infact do that exact syntax $('#slide1 > #slidebody'). The >character means direct descendant and is called the child selector (http://api.jquery.com/child-selector/). If the element may not be a direct descendant but nested inside something else you would omit the >and end up with $('#slide1 #slidebody').

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

As for the HTML snippet most are correct in mentioning that it is bad to have the same id on different elements and is considered an invalid document.

至于 HTML 片段,大多数人都正确地提到在不同元素上具有相同的 id 是不好的,并且被认为是无效的文档。

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

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

回答by Vandana

Use

$('#slide1 > #slide_body')

回答by Paul Fleming

Your markup is invalid. You cannot have two elements with the same ID. For this reason, the answer is no. Use classes instead.

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

回答by eberlast

The same thing happened to me, and I was looking for a solution, the truth that none of the ones published here worked for me and I found something that worked for me ($('#container').find('#child')):

同样的事情发生在我身上,我正在寻找解决方案,事实是这里发布的没有一个对我有用,我找到了对我有用的东西 ($('#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>

回答by Rory McCrossan

You can select like that, however it is entirely redundant as idattributes should be unique within the page. With that in mind, your current code is invalid. You should use a classwhere you need to group identifiers:

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

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

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

You would then use:

然后你会使用:

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

回答by Yuriy Rozhovetskiy

First at all, it's not very good decision to have non-unique ids. Despite of this you can pass context in jQuery function:

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

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

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

回答by Matt Zeunert

IDs should be unique on the page. Use classes instead:

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

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

And then #slide1 .slide_bodyas the selector.

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

回答by Kevin Bowersox

The id of an HTML element should be unique. Turn slide body into a class.

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

HTML

HTML

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

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

Selector

选择器

$("#slide1 .slide_body")