web-dev-qa-db-fra.com

jquery sélectionner le premier enfant avec la classe d'un parent avec la classe

Comment puis-je sélectionner uniquement le premier enfant d'une classe particulière d'un parent avec une classe particulière aux fins de clone()?

<div class="sector_order">

    <div class="line_item_wrapper">
    SELECT THIS DIV
    </div>

    <div class="line_item_wrapper">
    NOT THIS DIV
    </div>

</div>

J'essaie comme ça:

var form1 = $(this)
    .parents('.sector_order')
    .children('.line_item_wrapper')
    .children().clone(true)

et obtenez les deux div internes avec la classe line_item_wrapper, mais j'obtiens un objet vide lorsque j'essaye avec cet ajout:

children('.line_item_wrapper :first')

Merci!

javascriptjqueryjquery-selectors
23
1252748

Votre problème est que votre sélecteur est erroné, de plusieurs manières:

parents() renvoie un, deux ou plusieurs éléments qui correspondent au sélecteur passé à la méthode; pour vous limiter au premier élément apparié, utilisez closest() (qui renvoie un ou aucun élément correspondant au sélecteur transmis).

Votre première utilisation de la méthode children() renvoie les deux éléments, car les deux correspondent au sélecteur fourni et ont la classe line_item_wrapper; vous devez indiquer explicitement lequel des deux vous voulez, vous pouvez soit utiliser le sélecteur :first (ou la méthode first()), soit le sélecteur :first-child.

Le deuxième appel à la méthode children() trouve les enfants du premier élément mis en correspondance par le sélecteur, ce que vous ne semblez pas vouloir.

Quoi qu'il en soit, si vous devez utiliser le parent (à partir du même élément $(this)):

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first').clone(true);

Ou:

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first().clone(true);

Ou:

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first-child').clone(true);

Ou, franchement, une approche plus simple (mais cela ne dispense pas de la vérification du nom de classe parent):

var form1 = $(this).prevAll('.line_item_wrapper:last');

Ou:

var form1 = $(this).siblings('.line_item_wrapper').eq(0);

Les références:

43
David Thomas

Vous passez un sélecteur non valide à children(). Au lieu de

.children('.line_item_wrapper :first')

essayer

.children('.line_item_wrapper').first()
12
Blazemonger

Utilisez :first-child

var form1 = $(this).closest('.sector_order').find(':first-child');

OU .first()

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first();
2
Sushanth --

Essaye ça:

var $firstDiv = $(".sector_order > .line_item_wrapper:eq(0)");

Vous obtiendrez ainsi le premier descendant direct de sector_order avec la classe line_item_wrapper.

Exemple de violon

1
Rory McCrossan