javascript - 如果 li 为空，则在 jQuery 中隐藏 excluding span 属性

Question

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

如何在 span 字段存在时隐藏整个 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>

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>