如果数据属性与jQuery匹配，则隐藏div

Question

简单的选项卡设置，如果相应的内容窗格为空，则尝试隐藏导航控件。我想使用数据属性(数据内容(来匹配元素。

内容窗格隐藏得很好，但是导航控件不会。我错过了什么？我觉得我可能想得太多了。。。

jQuery；如果内容选项卡为空，则根据匹配的数据属性隐藏相应的导航控件。

基本结构：

$('.tabs-content li').each(function(){
if($.trim($(this).text()) == '' && $(this).children().length == 0){
		// hides content pane		
		$(this).hide(); 
		// should hide matching nav element
if ($(this).attr('data-content')  == "data-content" ) {
$('.tabs-navigation li').hide();
}
		 
}
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<nav>
<ul class="tabs-nav">
<li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
<li><a href="#" data-content="tab2">Tab 2</a></li>
<li><a href="#" data-content="tab3">Tab 3</a></li>
</ul> <!-- tabs-nav -->
</nav>
<ul class="tabs-content">
<li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li data-content="tab3"> </li>
</ul> <!-- tabs-content -->
</div> <!-- tabs -->

Fiddle：https://jsfiddle.net/tpveuqsk/2/

Answer 1

你可以做得更简单，比如：

$('.tabs-content li').each(function(){
if ($(this).text().trim() == "" ) {
$(this).hide();
var data = $(this).attr("data-content")
$(".tabs-nav a[data-content='"+data+"']").closest("li").hide()
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<nav>
<ul class="tabs-nav">
<li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
<li><a href="#" data-content="tab2">Tab 2</a></li>
<li><a href="#" data-content="tab3">Tab 3</a></li>
</ul> <!-- tabs-nav -->
</nav>
<ul class="tabs-content">
<li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li data-content="tab3"> </li>
</ul> <!-- tabs-content -->
</div> <!-- tabs -->

Answer 2

您可以使用data-content属性进行查询，然后只需查找最接近的li，请参阅下面的代码：

$('.tabs-content li').each(function(){
if($.trim($(this).text()) == '' && $(this).children().length == 0){
	
$('[data-content="'+$(this).attr('data-content')+'"]').closest('li').hide();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<nav>
<ul class="tabs-nav">
<li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
<li><a href="#" data-content="tab2">Tab 2</a></li>
<li><a href="#" data-content="tab3">Tab 3</a></li>
</ul> <!-- tabs-nav -->
</nav>
<ul class="tabs-content">
<li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li data-content="tab3"> </li>
</ul> <!-- tabs-content -->
</div> <!-- tabs -->

Answer 3

这应该可以工作。保存选项卡内容项的数据内容值。选项卡导航中的数据内容适用于"a"元素，而不是"li"元素。您想要隐藏两个en-li元素，所以请参阅下面的代码：

$('.tabs-content li').each(function(){
if($.trim($(this).text()) == '' && $(this).children().length == 0){
// hides content pane       
$(this).hide(); 
attrValue= $(this).attr('data-content');
// should hide matching nav element
$('.tabs-nav li').each(function(){
if ($(this).find('a').attr('data-content')  === attrValue ) {
$(this).hide();
}
})