Si li est vide, masquez l'exclusion de la propriété span dans jQuery

Question

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>

javascript jquery html css

0

sigur7 17 avril 2018 à 14:28

Answer 1

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>

1

Mario Cianciolo 17 avril 2018 à 11:38

Answer 2

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');
  }
});

1

Chilll007 17 avril 2018 à 11:44

Answer 3

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>

0

Mamun 17 avril 2018 à 12:20

Answer 4

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.

0

Takit Isy 17 avril 2018 à 11:59

Answer 5

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();

});

0

Nouman Saleem 17 avril 2018 à 13:07

Answer 6

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>

0

Narendra Jadhav 17 avril 2018 à 13:30

Si li est vide, masquez l'exclusion de la propriété span dans jQuery

6 réponses

De nouvelles questions