Question

是否可以在hr之前隐藏具有班级名称event-title(number)和h2的{{1}} event-title(number) div如果div具有班级名称events-container(number)没有文字？

代码：

{section name=MainOffice loop=$MainOffice}
   <h2 class="event-title1">{$MainOffice[MainOffice].offCountry}</h2><br />
   {* Hide if div events-container1 is without text *}
{/section}
<div class="events-container1">
  {* Example content1 *}
</div>
<hr class="event-line1" /> {* Hide if events-container1 is without text *}
<h2 class="event-title2">Online</h2> {* Hide if events-container2 is without text *}
<br />
<div class="events-container2">
  {* Example content2 *}
</div>
<hr class="event-line2" /> {* Hide if events-container2 is without text *}
<h2 class="event-title3">International</h2> {* Hide if events-container3 is without text *}
<br />
<div class="events-container3">
  {* Example content3 *}
</div>

Answer 1

您应该在命名（event-title_2）中使用分隔符，以便更轻松地选择元素。对于解决方案，我正在制作一个小提琴，我将尽快发布。

Answer 2

试试这个......

if ($('.events-container(number)').val() == '') {
    $('.event-title(number)').hide();
}

Answer 3

如果div有空文本，请尝试在hr和h2中添加hide class，

<div class="events-container1">
  {* Example content1 *}
</div>
{if ((isset($content1)) && ($content1 != ''))} {$hide=''} 
{else} {$hide='hide'} {/if}

<hr class="event-line1 {$hide}" /> {* Hide if events-container1 is without text *}

或者在jquery中它可以很简单，

$(function(){
   var $container=$('div[class^="events-container"]:empty'); //get empty div
   $container.each(function(i,v){ // loop for all containers
       var num=this.className.replace('events-container',''); //get class number
       $('.event-line'+num+',.event-title'+num).hide();// hide h2 and hr acc to num
   });
});

阅读start with selector和:empty-selector

Answer 4

以下内容无需修改代码中的任何内容即可使用。

jQuery

$(function () {
    $("[class^='event-title']").each(function () {
        if ($(this).next("[class^='events-container']").is(':empty')) {
            $(this).hide();
        }
    });
});

HTML

<h2 class="event-title-1">One</h2>
<div class="events-container1">div one</div>

<h2 class="event-title-2">Im hidden cause next div is empty</h2>
<div class="events-container2"></div>

<h2 class="event-title-3">three</h2>
<div class="events-container3">div thee</div>

演示 http://jsfiddle.net/q0b5qdfn/3/

Answer 5

只需运行此代码：

$("h2").filter(function() {
        var i = this.className.match(/event-title(\d)/)
        if(i != null){
            i = i[1] ; 
            return $("div.events-container"+i).html().length == 0;
        } else return false;
    }).hide()

$("hr").filter(function() {
        var i = this.className.match(/event-line(\d)/)
        if(i != null){
            i = i[1] ; 
            return $("div.events-container"+i).html().length == 0;
        } else return false;
    }).hide()

示例：http://jsfiddle.net/xu18fqr5/3/

Answer 6

使用类名（我的示例中为events-container）和内容div与另一个类名（我的示例中为content-container）分隔每个部分，然后循环每个events-container，检查内容容器div文本，如果没有则隐藏。

$(function() {
    $(".events-container").each(function() {
        if (!$(this).closest('div').next().find('.content-container').text()) {
            $(this).hide();
        }
    });
});

查看我的工作jsfiddle我已在第三个容器中注释了内容，并在页面加载时隐藏了div。

Jquery - 如果里面没有文本，在<div>之前隐藏<hr />和<h2>？</div> </h2>

6 个答案: