Maison > interface Web > js tutoriel > Plusieurs bonnes façons d'obtenir des éléments frères avec jQuery_jquery

Plusieurs bonnes façons d'obtenir des éléments frères avec jQuery_jquery

WBOY
Libérer: 2016-05-16 16:46:59
original
1508 Les gens l'ont consulté

Lors de l'obtention des éléments frères d'un élément spécifié, vous pouvez utiliser un combinateur frère adjacent ( ), dans lequel les deux côtés du contenu sont des expressions de sélection
Si vous souhaitez obtenir tous les éléments frères directs h2 de h1 dans l'exemple suivant.

Copier le code Le code est le suivant :


< h1>Titre principal

Titre de la section


Quelques contenus...

;

Plus de contenu ...




Vous pouvez l'utiliser directement

Copier le code Le code est le suivant :
$('h1 h2')
// Sélectionnez TOUS les éléments h2 qui sont adjacents frères et sœurs des éléments H1

Si Pour filtrer les éléments frères de h1, bien sûr vous pouvez également utiliser

Copiez le code Le code est le suivant :
$ ('h1').siblings('h2,h3,p');
// Sélectionnez tout H2, H3, et les éléments P qui sont frères et sœurs des éléments H1

Si vous souhaitez obtenir Pour tous les éléments frères après l'élément actuel, vous pouvez utiliser nextAll()
Par exemple, pour le code html suivant.

copier le code code Comme suit :

  • ;Premier élément

  • Deuxième élément

  • Troisième élément

  • Quatrième élément
  • Cinquième élément



Si vous souhaitez obtenir tous les éléments li après la deuxième entrée, vous pouvez utiliser ce qui suit code

Copiez le code Le code est le suivant :
$('li.selected' ).nextAll('li');

L'exemple ci-dessus peut également être implémenté en utilisant le combinateur général de frères et sœurs (~)

Copier le code Le code est le suivant :
$('li.selected ~ li');

Pour obtenir des éléments frères et sœurs directs, vous peut également utiliser next() directement sans utiliser de sélecteur.

Copier le code Le code est le suivant :
var topHeaders = $('h1') ;
topHeaders.next('h2').css('margin', '0);
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal