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

Hide empty element on Bootstrap tab via jQuery

本文关键字：元素 选项 jQuery 隐藏 Bootstrap 通过      更新时间：2023-09-26

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>

它的引导选项卡和工作良好。如果任何div没有p元素，我希望隐藏父级li

JS:

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

但它不起作用。我有什么问题？我该如何解决？非常感谢。

我会尝试这样的东西：

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

你可以这样做：

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

您需要单独查看每个元素。

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

要对它们进行迭代，请查看.each函数（请参阅其他答案）。如果元素有任何内容，您可以签入此函数，也可以改进选择器来为您执行此操作（请参见not过滤器）。

相关文章：