webentwicklung-frage-antwort-db.com.de

kann ich mit jQuery #id> #id auswählen?

kann ich mit jQuery #id> #id auswählen?

Ich habe diese Struktur

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

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

Gibt es eine Möglichkeit, mit jquery nur den #slide_body in # slide1 auszuwählen?

Oder ist die einzige Lösung, um die ID an jeden Körper wie div anzuhängen

<div id="slide2">
    <div id="slide_2_slide_body">
    some content
    </div>
</div>
12
Matt Welander

Sie können keine eindeutigen IDs in einem Dokument verwenden

Dieses Attribut weist einem Element einen Namen zu. Dieser Name muss in einem Dokument eindeutig sein.

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

In Ihrem Beispiel können Sie die Klasse "slide_body" verwenden

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

Und dann können Sie es mit #slide1 .slide_body oder $("#slide1").find('.slide_body') auswählen

8
Larry Cinnabar

Die Antwort auf die erste Frage:

kann ich mit jQuery #id> #id auswählen?

Sie können genau diese Syntax ausführen $('#slide1 > #slidebody'). Das Zeichen > bedeutet direkter Nachkomme und wird als untergeordneter Selektor bezeichnet ( http://api.jquery.com/child-selector/ ). Wenn das Element möglicherweise kein direkter Nachkomme ist, sondern in etwas anderem verschachtelt ist, lassen Sie den > weg und erhalten $('#slide1 #slidebody').

Was das HTML-Snippet angeht, so ist es in den meisten Fällen richtig zu erwähnen, dass es schlecht ist, die gleiche ID für verschiedene Elemente zu haben, und dass dies als ungültiges Dokument angesehen wird.

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

9
Gary.S

Dein Markup ist ungültig. Sie können nicht zwei Elemente mit derselben ID haben. Aus diesem Grund lautet die Antwort nein. Verwenden Sie stattdessen Klassen.

<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

Benutzen

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

IDs sollten auf der Seite eindeutig sein. Verwenden Sie stattdessen Klassen:

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

Und dann #slide1 .slide_body als Selektor.

0
Matt Zeunert

Die ID eines HTML-Elements sollte eindeutig sein. Verwandle den Rutschkörper in eine Klasse.

HTML

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

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

Auswahl

$("#slide1 .slide_body")
0
Kevin Bowersox

Sie können dies auswählen, es ist jedoch völlig redundant, da id Attribute innerhalb der Seite eindeutig sein sollten. In diesem Sinne ist Ihr aktueller Code ungültig. Sie sollten eine class verwenden, in der Sie Bezeichner gruppieren müssen:

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

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

Sie würden dann verwenden:

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

Erstens ist es keine gute Entscheidung, nicht eindeutige IDs zu haben. Trotzdem können Sie in der jQuery-Funktion den Kontext übergeben:

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

0

Das gleiche passierte mit mir und ich suchte nach einer Lösung, der Wahrheit, dass keine der hier veröffentlichten Lösungen für mich funktioniert und ich fand etwas, das für mich funktioniert ($ ('# 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>
0
eberlast