web-dev-qa-db-fra.com

puis-je sélectionner #id> #id avec jQuery?

puis-je sélectionner #id> #id avec jQuery?

J'ai cette structure

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

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

Existe-t-il un moyen de sélectionner, à l'aide de jQuery, uniquement le #slide_body à l'intérieur de # slide1?

Ou est la seule solution pour ajouter l'identifiant à chaque div du corps comme

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

Vous ne pouvez pas utiliser d'identifiants uniques dans un seul document

Cet attribut attribue un nom à un élément. Ce nom doit être unique Dans un document.

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

Dans votre exemple, vous pouvez utiliser la classe "slide_body"

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

Et puis vous pouvez le sélectionner avec #slide1 .slide_body ou $("#slide1").find('.slide_body')

8
Larry Cinnabar

La réponse à la première question:

puis-je sélectionner #id> #id avec jQuery?

Vous pouvez vous assurer que la syntaxe exacte est $('#slide1 > #slidebody'). Le caractère > signifie descendant direct et est appelé le sélecteur d'enfants ( http://api.jquery.com/child-selector/ ). Si l'élément peut ne pas être un descendant direct mais être imbriqué dans quelque chose d'autre, vous omettez le > et vous retrouvez avec $('#slide1 #slidebody').

En ce qui concerne l'extrait de code HTML, la plupart ont raison de mentionner qu'il est mauvais d'avoir le même identifiant sur différents éléments et est considéré comme un document non valide.

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

9
Gary.S

Votre marquage n'est pas valide. Vous ne pouvez pas avoir deux éléments avec le même identifiant. Pour cette raison, la réponse est non. Utilisez des classes à la place.

<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

Utilisation 

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

Les identifiants doivent être uniques sur la page. Utilisez des classes à la place: 

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

Et puis #slide1 .slide_body comme sélecteur.

0
Matt Zeunert

L'identifiant d'un élément HTML doit être unique. Transformez le corps de la diapositive en classe.

HTML

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

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

Sélecteur 

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

Vous pouvez sélectionner cette option, mais elle est entièrement redondante, car les attributs id doivent être uniques dans la page. Dans cet esprit, votre code actuel est invalide. Vous devez utiliser une class pour regrouper les identifiants:

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

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

Vous utiliseriez alors:

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

Tout d'abord, ce n'est pas une très bonne décision d'avoir des identifiants non uniques. Malgré cela, vous pouvez passer le contexte dans la fonction jQuery: 

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

0
Yuriy Rozhovetskiy

La même chose m’est arrivée, et je cherchais une solution, à savoir qu’aucune des publications publiées ici ne fonctionnait pour moi et j’avais trouvé quelque chose qui fonctionnait pour moi ($ ('# conteneur'). Find ('# enfant' )):

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