Je veux mettre en évidence le EM> second em> li élément strud> dans une liste de sélection choisie avec un connais classe ul fore> " Résultats choisi ". <body class="html not-front logged-in no-sidebars page-node page-node-add page-node-add-event-webinars i18n-en admin-menu coffee-processed masquerade-float-block-processed">
<div id="site-content">
<div class="row">
<div id="second-sidebar" class="clearfix">
<div class="flex-wrapper">
<div id="content">
<div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<form class="node-form node-event_webinars-form" action="/node/add/event-webinars" method="post" id="event-webinars-node-form" accept-charset="UTF-8">
<div>
<div class="form-item-title form-wrapper" id="edit-title-field">
<div class="form-item form-type-select-or-other form-item-title-field-und">
<div class="select-or-other select-or-other-processed">
<div class="form-item form-type-select form-item-title-field-und-select">
<select class="select-or-other-select form-select required chosen-processed" id="edit-title-field-und-select" name="title_field[und][select]" style="display: none;">
<option value="" selected="selected">- Select -</option>
<option value="select_or_other">< select to create new webinar title or choose from existing below ></option>
</select>
<div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen" style="width: 446px;">
<a class="chosen-single">
<span>- Select -</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">- Select -</li>
<li class="active-result" data-option-array-index="1">select to create new title</li>
<li class="active-result" data-option-array-index="2">This</li>
<li class="active-result" data-option-array-index="3">That</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
3 Réponses :
Utilisez le : Nth-enfant ( 2) sélecteur pour sélectionner le deuxième élément enfant ou Li: nième de type (2) pour obtenir le second
Utilisez p> : EQ () CODE> ou .eq () code> . Ils sont basés sur zéro, donc 1 code> serait le deuxième élément:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen">
<div class="chosen-drop">
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">- Select -</li>
<li class="active-result" data-option-array-index="1">select to create new title</li>
<li class="active-result" data-option-array-index="2">This</li>
<li class="active-result" data-option-array-index="3">That</li>
</ul>
</div>
</div>
Merci, j'ai essayé et mis à jour mon code ci-dessus mais il n'a eu aucun effet, pouvez-vous vérifier ma fonction s'il vous plaît?
Essayez ceci Je l'ai essayé et ça marche bien vérifier l'extrait suivant
P> $ ("UL.Chosen-Résultats LI: Nth-enfant (2)") / p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen">
<div class="chosen-drop">
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">- Select -</li>
<li class="active-result" data-option-array-index="1">select to create new title</li>
<li class="active-result" data-option-array-index="2">This</li>
<li class="active-result" data-option-array-index="3">That</li>
</ul>
</div>
</div>
Merci Ahmed, j'ai essayé et mis à jour mon code ci-dessus mais il n'a eu aucun effet, pouvez-vous vérifier ma fonction s'il vous plaît?
Cela fonctionne dans l'extrait de code et je m'y attendais aussi, j'ai appris à propos de: Nth-enfant merci! Mais dans ma page, cela ne le rend toujours pas rendu, j'ai ajouté le corps complet de ma question, peut-être qu'il a du mal à la localiser en raison du débit imbriqué?
Je viens d'essayer tout votre corps complet et ça marche aussi bien, peut-être que ce qui est lié à la version jQuery, quelle est votre version incluse?
Merci, j'utilise 1,8 à Drupal, essaye d'ajouter cela dans ce fichier JS qui est chargé github.com/cbiit/nci-drupal-modules/blob/master/select_or_ot son / ...
Cela fonctionne bien avec JQuery 1.8, ajoutant également ce fichier non fonctionné pour moi, car Drupal n'est pas défini, j'essayais de vous aider, mais cela semble être une question de dépendance.
Merci, vous pouvez probablement désactiver les fonctions spécifiques à drupes. J'ai même essayé de simplement ajouter une jQuery autonome distincte (voir dans ma question) car il devrait être possible de travailler malgré Drupal.
Pourquoi JQuery et pas seulement CSS?
ul.Chosen-Résultats: Nth-Enfant (2): Hover {Fond-Couleur: Jaune}Nice, merci Andreas, ne connaissait pas les œuvres de Nth-enfant avec CSS, j'ai fait ce travail en incluant l'élément LI Elément
UL.Chosen-Résultats LI: Nth-enfant (2) ;) Je voulais Pour le faire via JS afin que les .CSS ne soient chargés que sur une page lorsqu'ils sont réellement utilisés."En incluant l'élément Li" - Désolé, je suppose que j'ai raté cela d'une manière ou d'une autre lors de l'écriture du commentaire: /
Bien apprécié, malgré la recherche de JS, j'ai fait ce travail temporairement et j'ai appris certains :) Merci!