在Bootstrap选项卡上通过jQuery隐藏空元素 [英] Hide empty element on Bootstrap tab via jQuery

问题描述

HTML：

 < div class =ys-panel ys-tabs> 
< div class =panel-heading with-tabs> 
 
< li class =active> 
< a data-content-id =id1href =＃> 
< i class =ys-icons ys-icons-test1>< / i>选项卡1 
< / a> 
< / li> 
< li>< a data-content-id =id2href =＃>< i class =ys-icons ys-icons-test2>< / i>标签2< / a>< / li> 
< li> 
< a data-content-id =id3href =＃>< i class =ys-icons ys-icons-test3>< / i>标签3< / a> 
< / li> 
< / ul> 
< / div> 
< div class =panel-body> 
< div class =tab activeid =id1> 
< p> ...< / p> 
< / div> 
 
< div class =tab activeid =id2> 
< p> ...< / p> 
< / div> 
 
< div class =tab activeid =id3> 
< / div> 
< / div> 
< / div> 
  

其 Bootstrap选项卡并运行良好。我想如果任何div没有 p 元素，隐藏父元 li

JS：

  if（$（。tab）。length <0）{
 $（'。nav-tabs li a'）。parent（）。hide（）; 
} else {
 
} 
  

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

解决方案

我会尝试这样的：

 < $（$ .c> //为每个标签链接$（'。nav-tabs li a'）。each（function（）{//它是否相关div（通过内容id）没有ap元素？if（$（' ＃'+ $（this）.data（'content-id'）+'> p'）。length == 0）{//如果没有，找到链接的父li元素并隐藏它$（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-翼片> < div class =panel-heading with-tabs> < ul class =nav nav-tabsrole =tablist> < li class =active> < a data-content-id =id1href =＃> < i class =ys-icons ys-icons-test1>< / i>标签1< / a> < /锂> < li>< a data-content-id =id2href =＃>< i class =ys-icons ys-icons-test2>< / i>标签2< / a>< / li> <李> < a data-content-id =id3href =＃>< i class =ys-icons ys-icons-test3>< / i>标签3< / a> < /锂> < / UL> < / DIV> < div class =panel-body> < div class =tab activeid =id1> < p为H. ...< / p为H. < / DIV> < div class =tab activeid =id2> < p为H. ...< / p为H. < / DIV> < div class =tab activeid =id3> < / DIV> < / div>< / div>

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>

Its Bootstrap tab and working well. I want if any div hasn't p element, hide parent li

JS:

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

}

But its not working. What's my problem? How can I solve it? Thank you.

解决方案

I would try something like:

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

这篇关于在Bootstrap选项卡上通过jQuery隐藏空元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！