如果div为空，是否隐藏li

Question

我四处寻找了大约一周左右，现在尝试了各种技术，但到目前为止运气不佳。

我使用基于javascript的选项卡来标记页面上的内容。内容是从Wordpress自定义字段动态生成的。如果div没有要在HTML中显示的内容，我希望不出现相应的选项卡。这可能吗？

我的代码是这样的：

<ul class="tabs">
<li class="tab1"><a href="#view1">Tab 1</a></li>
<li class="tab2"><a href="#view2">Tab 2</a></li>
<li class="tab3"><a href="#view3">Tab 3</a></li>
<div class="tabcontents">
<div id="view1">
<div class="noScreen">
<h2>Tab 1</h2>
</div>
<div class="view1">
<?php the_field('tab1'); ?>
</div>
</div>
<!--end Tab1-->
<div id="view2">
<div class="noScreen">
<h2>Tab 2</h2>
</div>
<div class="view2">
<?php the_field('tab2'); ?>
</div>
</div>
<!--end Tab2-->
<div id="view3">
<div class="noScreen">
<h2>Tab 3</h2>
</div>
<div class="view3">
<?php the_field('tab3'); ?>
</div>
</div>
<!--end Tab1-->
</div>
<!--end tabcontents-->

因此，如果Tab1和Tab3用帖子中的数据回复，但Tab2是空的，我想把上面Tab2的li隐藏起来。

有人能帮忙吗？

提前感谢

Answer 1

我不得不修复上面HTML中丢失的一些标记和引号，但这似乎起到了作用。

JSFiddle:

http://jsfiddle.net/Q27K6/

$(function(){
    $('div.tabcontents > div').each(function(index){
        var innerView = $(this).find('div[class^="view"]');
        var innerHtml = $(innerView).html();
        if(innerHtml.trim() == ''){
            $(this).hide();
            $('ul.tabs').find('li').eq(index).hide();
        }
    });
});

Answer 2

而不是使用the_field(打印信息(，看看是否有get_field函数返回的信息。这样，您就可以预先决定div是否为空。

$tab2content=get_field('tab2');
if(!empty($tab2content)) {
    echo '<div id="view2">';
    echo '<div class="noScreen"><h2>Tab 2</h2></div>';
    echo '<div class="view2">'.$tab2content.'</div>';
    echo '</div>';
}

如果这不起作用，在加载内容并解决任何ajax调用后，可以通过运行来判断div是否为空

if(jQuery('.view2').html()==='') {
    jQuery('#view2').hide();
}

但是，请记住，如果您的DOM有多个view2类元素，则html((方法将生成第一个匹配元素的内容。

Answer 3

您想知道<div class='view2'>的内容是否为空吗？div id='view2'>永远不会是空的，所以我认为它是前者。

那么，它是否为空取决于php函数the_field('tab2')是否返回了任何内容，对吧？

因此，解决此问题的一种方法是在服务器上执行此操作，方法是检查函数the_field('tab2')(或其他函数(是否为空。不过，这在php中有点复杂。

或者在javascript:中

$().ready(function() {
  var hideTab = function(index) {
    var $view = $('.view' + index)
      , $tab = $('.tab' + index);
    if($.trim($view.html()).length === 0) {
      $tab.hide();
    }
  }
  // Stick this in a loop to make it neater
  hideTab(1);
  hideTab(2);
  hideTab(3);
});