Question

我有一大堆列表项，其中包含更多列表项。

对于所有<li id="company-name" class="hide">，我想检测此元素是否为空。

如果为空，我想在直接父<li class="hide">元素中隐藏所有<ul></ul>。

<ul>
    <li>
        <ul class="greyul">
            <li>Location:</li>
            <li class="hide">Company:</li> <!-- DONT HIDE -->
        </ul>
        <ul class="whiteul">
            <li>Melbourne</li>
            <li id="company-name" class="hide"></li> <!-- HIDE -->
            <li class="hide">Sydney</li> <!-- HIDE ALSO-->
        </ul>
    </li>
</ul>

Answer 1

您可以使用简单的css选择器:empty

.hide:empty{
    display: none;
}

使用jQuery：

$('.hide:empty').hide();

如果你想隐藏父div，那么你可以使用：

$('.hide:empty').parent().hide();

根据您更新的问题，您可以像这样使用not selector和contains selector：

$('.hide:not(:contains("Company:"))').hide();

Answer 2

您在HTML中使用了多个id="company-name"，这不是正确的过程。把它们改成课堂。

您可以使用 each() 函数进行迭代。

＆＃13;

$('li.company-name').each(function(){
    if( $.trim($(this).text()) == '')
        $(this).parents('li:first').find('.hide').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li class="company-name hide">display;none; on all items with the class 'hide' within THIS PARENT LIST item only, if this li has no content</li>
    </ul>
  </li>

  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li class="company-name hide"></li>
    </ul>
  </li>

  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li class="company-name hide">ABC</li>
    </ul>
  </li>

</ul>

＆＃13;

Answer 3

这是你想要的吗？

编辑：感谢@patlkli和@Sphinxxx修复答案

$('li#company-name.hide:empty').hide().siblings('li.hide').hide();

隐藏所有空<li id="company-name" class="hide">元素，然后隐藏任何邻居/兄弟<li class="hide">元素，无论它们是否也为空。

http://jsfiddle.net/kxzLfc5L/4/

Answer 4

$('ul li').each(function() { 
    if($(this).html()=="") {
        $(this).addClass('hide'); 
    } else {
        $(this).removeClass('hide'); 
    }
});

.hide {
    dispaly:none;
}

Answer 5

这是一个纯粹的JavaScript解决方案：

首先检查包含空项目的列表，并添加class＆＃39; hasEmptyItems＆＃39;他们：

var emptyItems = document.querySelectorAll('.hide');
for (var i = 0; i < emptyItems.length; i++) {
    if(emptyItems[i].innerHTML.trim() === '') {
        emptyItems[i].parentNode.classList.add('hasEmptyItems');
        break; //stop looping as soon as one empty item is found
    }     
}

接下来使用CSS隐藏元素＆＃39;隐藏＆＃39;具有类＆＃39; hasEmptyItems＆＃39;的列表中的类

.hasEmptyItems .hide {
    display: none;
}

FIDDLE

＆＃13;

var emptyItems = document.querySelectorAll('.hide');
for (var i = 0; i < emptyItems.length; i++) {
    if(emptyItems[i].innerHTML.trim() === '') {
        emptyItems[i].parentNode.classList.add('hasEmptyItems');
        break; //stop looping as soon as one empty item is found
    }     
}

＆＃13;

.hasEmptyItems .hide {
  display: none;
}

＆＃13;

<ul>
  <li>
    <ul class="greyul">
      <li>Location:</li>
      <li class="hide">Company:</li>
      <!-- DONT HIDE -->
    </ul>
    <ul class="whiteul">
      <li>Melbourne</li>
      <li id="company-name" class="hide">  </li>
      <!-- HIDE -->
      <li class="hide">Sydney</li>
      <!-- HIDE ALSO-->
    </ul>
  </li>
</ul>

＆＃13;

Answer 6

简单而重要。：）

<!-- Script to hide the blank/empty li--> 
<script>
$(document).ready(function(){ $('li').filter(function(){ 
    return $.trim($(this).html()) == '';}).hide() });
</script>

如果一个没有内容或为空，则隐藏多个列表项

6 个答案:

FIDDLE