[英]How to hide a div when another div is empty
我是jQuery的新手,我遇到了一些麻煩。
這是我的HTML:
<div id="mainpage-tabs-area">
<ul class="nav cf">
<li class="tb-one"><a href="#description" class="current">BTN1</a></li>
<li class="tb-two"><a href="#tabtwo">BTN2</a></li>
<li class="tb-three"><a href="#tabthree">BTN3</a></li>
<li class="tb-four"><a href="#tabfour">BTN4</a></li>
</ul>
<div class="list-wrap">
<ul id="description">
<li>Hello, I am a description</li>
</ul>
<ul id="tabtwo" class="hide">
<li></li>
</ul>
<ul id="tabthree" class="hide">
<li></li>
</ul>
<ul id="tabfour" class="hide">
<li></li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs -->
這是我目前的jQuery:
$(document).ready(function () {
var tabContent = $('ul.list-wrap').find('li').text();
if ($.trim(tabContent) === "") {
$('ul.nav li').hide();
}
});
我想要做的只是jQuery檢查.list-wrap中的每個li,如果li是空的,那么刪除.nav中的相應li,因為這是一個制表系統,如果沒有輸入內容,他們不希望它顯示。
對新手的任何建議?
缺口
我將遍歷列表項,檢查每個節點文本的長度,並隱藏相應的選項卡:
$('.list-wrap li').each(function(i){ if(!$(this).text().length) $('#mainpage-tabs-area li').eq(i).hide(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="mainpage-tabs-area"> <ul class="nav cf"> <li class="tb-one"><a href="#description" class="current">BTN1</a> </li> <li class="tb-two"><a href="#tabtwo">BTN2</a> </li> <li class="tb-three"><a href="#tabthree">BTN3</a> </li> <li class="tb-four"><a href="#tabfour">BTN4</a> </li> </ul> <div class="list-wrap"> <ul id="description"> <li>Hello, I am a description</li> </ul> <ul id="tabtwo" class="hide"> <li></li> </ul> <ul id="tabthree" class="hide"> <li></li> </ul> <ul id="tabfour" class="hide"> <li></li> </ul> </div> <!-- END List Wrap --> </div> <!-- END Organic Tabs -->
each()
函數中的i
是循環所在元素的索引,它允許您定位相應的制表符元素並將其隱藏。
這應該做的工作:
$('.list-wrap ul li').each(function(){
var cnt = $('.list-wrap ul li').index( $(this) );
var txt = $(this).text();
if ($.trim(txt)==''){
$('.nav li').eq(cnt).hide();
}
});
我建議如果你沒有制作無限列表
$('.tb-two').hide(); //if tabtwo is empty $('.tb-hree').hide(); //if tabthree is empty and so on...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.