Question

HTML：

<div class="ys-panel ys-tabs">
        <div class="panel-heading with-tabs">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active">
                    <a data-content-id="id1" href="#">
                        <i class="ys-icons ys-icons-test1"></i> Tab 1
                    </a>
                </li>
                <li><a data-content-id="id2" href="#"><i class="ys-icons ys-icons-test2"></i> Tab 2</a></li>
                <li>
                    <a data-content-id="id3" href="#"><i class="ys-icons ys-icons-test3"></i> Tab 3</a>
                </li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="tab active" id="id1">
                <p>...</p>
            </div>

             <div class="tab active" id="id2">
                <p>...</p>
            </div>

             <div class="tab active" id="id3">
            </div>
        </div>
    </div>

其Bootstrap tab并且运作良好。我想如果任何div没有p元素，隐藏父li

JS：

if ($(".tab").length < 0) {
        $('.nav-tabs li a').parent().hide();
    } else {

}

但它不起作用。我的问题是什么？我该如何解决？谢谢。

Answer 1

我会尝试类似的事情：

// for each tab link
$('.nav-tabs li a').each(function() {
    // does it's related div (by content id) not have a p element?
    if ($('#' + $(this).data('content-id') + ' > p').length == 0) {
        // if not, find the link's parent li element and hide it
        $(this).parent('li').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ys-panel ys-tabs">
	<div class="panel-heading with-tabs">
		<ul class="nav nav-tabs" role="tablist">
			<li class="active">
				<a data-content-id="id1" href="#">
					<i class="ys-icons ys-icons-test1"></i> Tab 1
				</a>
			</li>
			<li><a data-content-id="id2" href="#"><i class="ys-icons ys-icons-test2"></i> Tab 2</a></li>
			<li>
				<a data-content-id="id3" href="#"><i class="ys-icons ys-icons-test3"></i> Tab 3</a>
			</li>
		</ul>
	</div>
	<div class="panel-body">
		<div class="tab active" id="id1">
			<p>...</p>
		</div>

		 <div class="tab active" id="id2">
			<p>...</p>
		</div>

		 <div class="tab active" id="id3">
		</div>
	</div>
</div>

Answer 2

你可以这样做：

$(".panel-body .tab:not(:has(p))").each(function() {
  alert(this.id)
  $('a[data-content-id="' + this.id + '"]').closest("li").hide();


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="ys-panel ys-tabs">
  <div class="panel-heading with-tabs">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a data-content-id="id1" href="#">
          <i class="ys-icons ys-icons-test1"></i> Tab 1
        </a>
      </li>
      <li><a data-content-id="id2" href="#"><i class="ys-icons ys-icons-test2"></i> Tab 2</a>
      </li>
      <li>
        <a data-content-id="id3" href="#"><i class="ys-icons ys-icons-test3"></i> Tab 3</a>
      </li>
    </ul>
  </div>
  <div class="panel-body">
    <div class="tab active" id="id1">
      <p>...</p>
    </div>

    <div class="tab active" id="id2">
      <p>...</p>
    </div>

    <div class="tab active" id="id3">
    </div>
  </div>
</div>

Answer 3

您需要自己查看每个元素。

使用您拥有的选择器（$(".tab")），您可以使用类标签选择所有元素。在您的示例中，所选元素的长度始终为3（因为您有三个选项卡）。

要迭代它们，请查看.each函数（请参阅其他答案）。您可以签入此功能，如果该元素包含任何内容，或者改进您的选择器以便为您执行此操作（请参阅not过滤器）。

通过jQuery在Bootstrap选项卡上隐藏空元素

3 个答案: