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

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>