J'ai divers produits dans lesquels nous listons les champs / propriétés dans une liste. Parfois, certaines propriétés sont vides. Lorsque j'essaie de les masquer avec jQuery, le fait que l'élément li contient le nom du champ empêche le script de s'exécuter.
Comment masquer l'intégralité du li (dans ce cas: code-barres, notes) alors que les champs span sont présents?
$('ul li').each(function() {
if ($(this).text().length < 1)
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
<li class="barcode"><span style="color:#333;font-weight:bold">Barcode: </span></li>
<li class="bookauthor"><span style="color:#333;font-weight:bold">Book Author: </span>Entry</li>
<li class="format"><span style="color:#333;font-weight:bold">Format: </span>Entry</li>
<li class="pubdate"><span style="color:#333;font-weight:bold">Publication Date: </span>Entry</li>
<li class="publisher"><span style="color:#333;font-weight:bold">Publisher: </span>Entry</li>
<li class="notes"><span style="color:#333;font-weight:bold">Notes: </span></li>
<li class="rank"><span style="color:#333;font-weight:bold">Rank: </span>Entry</li>
</ul>
6 réponses
Vous pouvez inclure les propriétés dans un élément supplémentaire:
$('.bookprofile li').each(function() {
if ($(this).find('.properties').text().length < 1)
$(this).hide();
});
.bookprofile .barcode .label {
color: #333;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
<li class="barcode"><span class="label">Barcode: </span><span class="properties"></span></li>
<li class="bookauthor"><span class="label">Book Author: </span><span class="properties">Entry</span></li>
<li class="format"><span class="label">Format: </span><span class="properties">Entry</span></li>
<li class="pubdate"><span class="label">Publication Date: </span><span class="properties">Entry</span></li>
<li class="publisher"><span class="label">Publisher: </span><span class="properties">Entry</span></li>
<li class="notes"><span class="label">Notes: </span><span class="properties"></span></li>
<li class="rank"><span class="label">Rank: </span><span class="properties">Entry</span></li>
</ul>
J'ai créé la démo qui résoudra votre problème
Lien pour https://codepen.io/chirag007/pen/bMbWyR
C'est ce que j'ai changé pour le faire fonctionner.
J'ai obtenu cette réponse d'ici Obtenez le texte après l'élément span en utilisant jquery
$('ul li').each(function() {
var a = $(this).contents().filter(function() {
return this.nodeType == 3;
}).text();
console.log(a);
if(a == ''){
$(this).addClass('hide');
}
});
Puisque vous utilisez jQuery, vous pouvez clone()
tous les children()
à remove()
et revenir au li
avec end()
et prendre le texte.
$('ul li').each(function() {
var text = $(this).clone().children().remove().end().text();
if(text < 1)
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
<li class="barcode"><span style="color:#333;font-weight:bold">Barcode: </span></li>
<li class="bookauthor"><span style="color:#333;font-weight:bold">Book Author: </span>Entry</li>
<li class="format"><span style="color:#333;font-weight:bold">Format: </span>Entry</li>
<li class="pubdate"><span style="color:#333;font-weight:bold">Publication Date: </span>Entry</li>
<li class="publisher"><span style="color:#333;font-weight:bold">Publisher: </span>Entry</li>
<li class="notes"><span style="color:#333;font-weight:bold">Notes: </span></li>
<li class="rank"><span style="color:#333;font-weight:bold">Rank: </span>Entry</li>
</ul>
Basé sur la même idée que N. Jadhav a utilisée,
Voici ce que je vais faire:
$('ul li').each(function() {
if (!$(this).html().split('</span>')[1]) {
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
<li class="barcode"><span style="color:#333;font-weight:bold">Barcode: </span></li>
<li class="bookauthor"><span style="color:#333;font-weight:bold">Book Author: </span>Entry</li>
<li class="format"><span style="color:#333;font-weight:bold">Format: </span>Entry</li>
<li class="pubdate"><span style="color:#333;font-weight:bold">Publication Date: </span>Entry</li>
<li class="publisher"><span style="color:#333;font-weight:bold">Publisher: </span>Entry</li>
<li class="notes"><span style="color:#333;font-weight:bold">Notes: </span></li>
<li class="rank"><span style="color:#333;font-weight:bold">Rank: </span>Entry</li>
</ul>
Je préfère utiliser html()
au lieu de text()
, car c'est plus facile à comprendre car nous avons en fait le HTML. Ensuite, il suffit d'utiliser la balise de fin </span>
pour couper la chaîne html.
J'espère que cela aide.
Vous faites tout cela en une seule fois .. ajoutez une durée supplémentaire avec le test de classe.
<ul class="bookprofile">
<li class="barcode">
<span style="color:#333;font-weight:bold">Barcode: </span>
<span class='test'></span></li>
<li class="bookauthor">
<span style="color:#333;font-weight:bold">Book Author: </span>
<span class='test'>Entry</span></li>
<li class="format">
<span style="color:#333;font-weight:bold">Format: </span>
<span class='test'>Entry</span></li>
<li class="pubdate">
<span style="color:#333;font-weight:bold">Publication Date: </span>
<span class='test'>Entry</span></li>
<li class="publisher">
<span style="color:#333;font-weight:bold">Publisher: </span>
<span class='test'>Entry</span></li>
<li class="notes">
<span style="color:#333;font-weight:bold">Notes: </span>
<span class='test'></span></li>
<li class="rank">
<span style="color:#333;font-weight:bold">Rank: </span>
<span class='test'>Entry</span></li>
</ul>
Votre Jquery sera comme ça
$('ul li').each(function() {
if ($(this).children('.test').text().length <1)
$(this).hide();
});
Vous utilisez $(this).text().length < 1
donc ce sera toujours false
parce que vous avez fourni comme ceci
<span style="color:#333;font-weight:bold">Barcode: </span>
La sortie sera Barcode:
.
Au lieu de cela, vous pouvez utiliser une autre balise à l'intérieur de la balise li
pour le texte de droite et obtenir cette balise à l'aide de $(this).find('tag_name.classname')
ou $(this).find('#id')
et vérifier le texte de cette balise si la valeur est vide, puis masquer la balise.
DEMO
$('ul li').each(function() {
if (!$(this).find('span.right').text()) {
$(this).hide();
}
});
.lef-span {
color: #333;
font-weight: bold;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bookprofile">
<li class="barcode"><span class="lef-span">Barcode:</span><span class="right"></span></li>
<li class="bookauthor"><span class="lef-span">Book Author:</span><span class="right">Entry</span></li>
<li class="format"><span class="lef-span">Format:</span><span class="right">Entry</span></li>
<li class="pubdate"><span class="lef-span">Publication Date:</span><span class="right">Entry</span></li>
<li class="publisher"><span class="lef-span">Publisher:</span><span class="right">Entry</span></li>
<li class="notes"><span class="lef-span">Notes:</span><span class="right"></span></li>
<li class="rank"><span class="lef-span">Rank:</span><span class="right">Entry</span></li>
</ul>
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.