Dans la source, nous voulons trouver le nombre de li.q_basket_area appartenant à ul#side-recent-area.
La valeur affichée dans le journal de la console est 3 au lieu de 5.
La console affiche correctement 5.
<span class="recent_number"></span>
<ul id="side-recent-area" class="side-recent-area">
<li class="q_basket_area xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area displaynone xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area displaynone xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
</ul>Dans le cas ci-dessus, la valeur de nodesSameClass vaut 3.
Le style de la classe diplaynone est display:none!important;
Cela est-il affecté? Qu'est-ce qui ne va pas?
Merci d'avance.
.displaynone {display:none!important;}
var parent = document.getElementById("side-recent-area");
var nodesSameClass = parent.getElementsByClassName("q_basket_area");
console.log(nodesSameClass.length);
$newAt(".recent_number").text('['+ nodesSameClass +']');
3 Réponses :
Lorsque vous sélectionnez des éléments dont la classe correspond à q_basket_area , JS retournera tous les nœuds, qu'ils soient visibles ou non. Si vous souhaitez filtrer la collection de nœuds de telle sorte que seuls les nœuds visibles restent, vous devrez:
display est définie sur "none" En JavaScript, cela peut être fait comme suit:
Array.prototype.slice.call () pour convertir la collection en un tableau display calculée, accessible à l'aide de window.getComputedStyle () .display , et en vérifiant si elle correspond à la chaîne "aucun" ou pas. const parent = document.getElementById("side-recent-area");
const nodesSameClass = parent.getElementsByClassName("q_basket_area")
const visibleNodes = Array.from(nodesSameClass)
.filter(element => window.getComputedStyle(element).display !== 'none');
console.log(visibleNodes.length);
Voir l'extrait ci-dessous comme une démonstration de validation de principe:
<span class="recent_number"></span>
<ul id="side-recent-area" class="side-recent-area">
<li class="q_basket_area xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area displaynone xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
<li class="q_basket_area displaynone xans-record-">
<div class="q_basket_details displaynone">
<h3 class="q-heading -size-xs">
<a href="/show/board.html##param##">product</a>
</h3>
<ul class="q_basket_info">
<li class="q_basket_name">
<a href="#;" class="displaynone">(eng : )</a>
</li>
</ul>
</div>
</li>
</ul>
.displaynone {display:none!important;}
var parent = document.getElementById("side-recent-area");
var nodesSameClass = parent.getElementsByClassName("q_basket_area")
var visibleNodes = Array.prototype.slice.call(nodesSameClass)
.filter(function(element) {
return window.getComputedStyle(element).display !== 'none';
});
console.log(visibleNodes.length);
Si vous êtes familier avec la syntaxe ES6, les choses deviennent beaucoup plus faciles:
var parent = document.getElementById("side-recent-area");
var nodesSameClass = parent.getElementsByClassName("q_basket_area")
var visibleNodes = Array.prototype.slice.call(nodesSameClass)
.filter(function(element) {
return window.getComputedStyle(element).display !== 'none';
});
console.log(visibleNodes.length);
La différence est que:
const au lieu de var Array.from pour convertir un NodeCollection en un tableau Array.prototype.filter () Eh bien, le résultat n'est pas faux. Vérifiez le message de Terry comment exclure tout ce que vous ne souhaitez pas obtenir en tant qu'élément. Il répond exactement à votre question.
Une alternative comme solution sur une seule ligne consiste à utiliser querySelectorAll .
var l = document.querySelectorAll( 'ul#side-recent-area li.q_basket_area:not(.displaynone)' ).length; console.log( l ); // run this to get the result
Vous pouvez également utiliser CSS pour obtenir le nombre d'éléments de liste:
consultez: https://www.w3schools.com/css/css_counters.asp
<ul> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> <li>List item.</li> </ul>
li {
counter-increment: section
}
ul:after {
content: "Item Count:" counter(section) "";
margin-top: 2rem;
display: block;
}
J'ai converti votre code en un extrait de code exécutable, et comme vous pouvez le voir, le script fonctionne et enregistre
5sur la console. Veuillez modifier l'extrait de code pour en faire un exemple reproductible minimal qui montre le problème réel.Quand je mets cela dans un CodePen, j'obtiens une sortie console de
5.@Andreas La question est fausse, elle est corrigée. Je vous remercie.
@AlexandervanOostenrijk La question est fausse, elle est corrigée. Je vous remercie.
Veuillez modifier l'extrait de code pour qu'il montre le problème réel avec un exemple reproductible minimal . Et qu'est-ce que le script ajouté? Où, comment et quand est-il exécuté?
@Andreas je vais l'organiser et le corriger, merci de votre intérêt.
Tout semble normal. Vous avez 5 éléments au total, mais 2 sont stylisés avec une classe «cachée». 3 produits sont affichés dans la liste sur la page, et votre console affiche correctement 5 éléments au total.