Question

我有各种产品，我们在列表中列出字段/属性。有时一些属性是空的。当我尝试使用jQuery隐藏它们时，li元素包含字段名称这一事实导致脚本无法执行。

如果跨区域存在，我怎样才能隐藏整个li（在这种情况下：条形码，注释）？

＆＃13;

   $('ul li').each(function() {
    if ($(this).text().length < 1)
        $(this).hide();
    });

＆＃13;

<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>

＆＃13;

Answer 1

您可以将属性括在一个额外的元素中：

$('.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>

Answer 2

我创建了解决您问题的演示

https://codepen.io/chirag007/pen/bMbWyR

的链接

这是我改变它以使其发挥作用。

我从这里得到了这个答案Get the text after span element using jquery

$('ul li').each(function() {
  var a = $(this).contents().filter(function() {
      return this.nodeType == 3;
  }).text();
  console.log(a);
  if(a == ''){
   $(this).addClass('hide');
  }
});

Answer 3

您正在使用$(this).text().length < 1所以它始终false，因为您提供了这样的

<span style="color:#333;font-weight:bold">Barcode: </span>

输出为Barcode:。

您可以在li标记内使用另外一个标记作为右侧文本，并使用$(this).find('tag_name.classname')或$(this).find('#id')获取该标记，如果值为，则检查该标记的文本空白然后隐藏标签。

<强>样本

$('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>

Answer 4

基于N. Jadhav使用的相同想法，
这是我要做的：

$('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>

我更喜欢使用html()代替text()，因为我们实际拥有html更容易理解。然后，我们只需使用结束标记</span>来剪切html字符串。

希望它有所帮助。

Answer 5

由于您使用的是jQuery，您可以clone() children()到remove()，然后使用li返回end()并获取文字。

＆＃13;

$('ul li').each(function() {
  var text = $(this).clone().children().remove().end().text();

  if(text < 1)
    $(this).hide();
});

＆＃13;

<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>

＆＃13;

Answer 6

你是在一个范围内完成所有这一切..再加上一个班级测试。

<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>

你的Jquery会是这样的

$('ul li').each(function() {
if ($(this).children('.test').text().length <1)

    $(this).hide();

}）;

如果li为空，则隐藏jQuery中的span属性

6 个答案: