如果 li 为空，则在 jQuery 中隐藏排除 span 属性

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

如何在存在跨度字段时隐藏整个 li(在本例中为条形码、便笺(？

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

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

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

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

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

这就是我为使其工作而更改的内容。

我从这里得到了这个答案使用 jquery 获取 span 元素后的文本

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

基于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。然后，我们只需要使用 end 标记</span>来剪切 html 字符串。

希望对您有所帮助。

你在一个跨度中完成所有这些工作..使用类测试再添加一个跨度。

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

}(;

您正在使用$(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>

相关内容

最新更新

热门标签：