web-dev-qa-db-ja.com

jQueryで#id> #idを選択できますか？

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のみを選択する方法はありますか？

または、次のように各ボディのdivにIDを追加する唯一のソリューションです

<div id="slide2">
    <div id="slide_2_slide_body">
    some content
    </div>
</div>
javascriptjqueryhtmlcss-selectors
13
Matt Welander

1つのドキュメントで一意の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')で選択できます。

9
Larry Cinnabar

最初の質問への答え：

jQueryで#id> #idを選択できますか？

正確な構文$('#slide1 > #slidebody')をそのまま実行できます。 _>_文字は直接の子孫を意味し、子セレクター（ http://api.jquery.com/child-selector/ ）と呼ばれます。要素が直接の子孫ではないが、何かの中にネストされている場合は、_>_を省略し、$('#slide1 #slidebody')で終了します。

HTMLスニペットに関しては、異なる要素に同じIDを付けるのはよくなく、無効なドキュメントと見なされることを指摘することでほとんどが正しいです。

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

9
Gary.S

使用する

$('#slide1 > #slide_body')
5
Vandana

マークアップが無効です。同じIDを持つ2つの要素を持つことはできません。このため、答えはノーです。代わりにクラスを使用してください。

<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');
3
Paul Fleming

同じことが私にも起こりました、そして私は解決策を探していました、ここで公開されたものはどれも私のために機能せず、私のために機能するものを見つけたという真実（$（ '＃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>
1
eberlast

IDはページ上で一意である必要があります。代わりにクラスを使用してください：

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

その後 #slide1 .slide_bodyセレクタとして。

0
Matt Zeunert

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")
0
Kevin Bowersox

そのように選択できますが、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');
0
Rory McCrossan

まず最初に、一意でないIDを持つことはあまり良い決定ではありません。これにもかかわらず、jQuery関数でコンテキストを渡すことができます。

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

0
Yuriy Rozhovetskiy