recherche

Maison >interface Web >js tutoriel >Une brève explication du sélecteur de filtre de sous-élément dans jQuery_jquery

Une brève explication du sélecteur de filtre de sous-élément dans jQuery_jquery

WBOY
WBOYoriginal
2016-05-16 15:04:502041parcourir

La règle de filtrage du filtre d'élément enfant est d'obtenir l'élément correspondant via la relation entre l'élément parent et l'élément enfant.

2016418172315508.png (694×613)

$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 
 
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 
 
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 
 
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素 
 
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素 
 
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素

Nous savons utiliser

:first

Le sélecteur de filtre peut obtenir le premier élément enfant de l'élément parent spécifié, mais ce sélecteur ne renvoie qu'un seul élément, pas une collection, et utilise 

:first-child

Le sélecteur de filtre d'élément enfant peut obtenir le premier élément enfant renvoyé dans chaque élément parent. Il s'agit d'une collection et est couramment utilisé pour le traitement de sélection de plusieurs données de collection.

Comme indiqué ci-dessous, si vous souhaitez obtenir le premier li de chaque ul de la page et changer sa couleur. Ensuite, vous pouvez utiliser 

: first-child


<body>
  <h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
  <ul>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ul>
  <ul>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ul>
</body>

<script type="text/javascript">
  $("li:first-child").css("color", "red");
</script>

L'effet affiché dans le navigateur :

2016418172340814.jpg (489×326)

Réussi

$("li:first-child")
Le code sélecteur

obtient le premier élément 25edfb22a4f469ecb59f1190150159c6 des deux éléments parents ff6d136ddc5fdfeffaf53ff6ee95f185 

css()
La méthode
modifie la couleur du texte qu'ils affichent sur la page.

Déclaration：
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
Article précédent：Exemple de partage de conversion de pages HTML en images à l'aide des compétences PHP+JavaScript_javascriptArticle suivant：Exemple de partage de conversion de pages HTML en images à l'aide des compétences PHP+JavaScript_javascript

Articles Liés

Voir plus