Question

我想检查 .pp-post-content-awards 和 pp-post-content-location 是否没有文字。

如果没有设置display：none以及之前的前一个元素，那么这两个元素都将是.pp-post-content-subtitle。

DOM中存在多个这样的实例，但只想删除空的那些以及字幕前面的元素。

我知道我必须使用.each（），但无法弄清楚如何。

<div id="pp-post-right-{post_id}" class="pp-post-right">
    <span class="pp-post-content-subtitle">Location</span>
    <div class="pp-post-content-location">{%ptb_location%}</div>
    <span class="pp-post-content-subtitle">Accolades &amp; Awards</span>
    <div class="pp-post-content-awards">{%ptb_accolades_and_awards%}</div>
</div>


$('.pp-post-content-location').each(function() {
   let locationContent = $(''this').text();
   if (locationContent = '') {
      $('this').css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   let awardsContent = $('this').text();
   if (awardsContent = '') {
      $('this').css('display','none');
   }
});

Answer 1

您可以使用:empty选择器

选择所有没有子元素的元素（包括文本节点）。

$('.pp-post-content-location:empty, .pp-post-content-awards:empty').hide()

实现的问题是使用this，它是指迭代中的当前元素，因此不应该在引号中，=是赋值运算符，您需要使用== / {{ 1}}用于比较。

===

Answer 2

$('.pp-post-content-location').each(function() { let locationContent = $(this).text(); if (locationContent == '') { $(this).css('display','none'); } }); =＆gt; let locationContent = $(''this').text();

var locationContent = $(this).text();

$('.pp-post-content-location').each(function() {
   var locationContent = $(this).text();
   if (locationContent == '') {
      $(this).css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   var awardsContent = $(this).text();
   if (awardsContent == '') {
      $(this).css('display','none');
   }
});

Answer 3

<div id="pp-post-right-{post_id}" class="pp-post-right">
    <span class="pp-post-content-subtitle">Location</span>
    <div class="pp-post-content-location">{%ptb_location%}</div>
    <span class="pp-post-content-subtitle">Accolades &amp; Awards</span>
    <div class="pp-post-content-awards">{%ptb_accolades_and_awards%}</div>
</div>


$('.pp-post-content-location').each(function() {
   let locationContent = $('this').text(); //corrected this
   if (locationContent == '') { //corrected this
      $('this').css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   let awardsContent = $('this').text();
   if (awardsContent == '') {// corrected this
      $('this').css('display','none');
   }
});

=用于作业。

== linient equality

===严格平等

Answer 4

$('.pp-post-content-awards').each(function(){
if (!$(this).text().trim().length) {
    $(this).css('display','none');
}});

尝试使用您的代码进行此操作。使用Jquery函数修剪并获取长度以确保它不仅包含空格。

Answer 5

$(".pp-post-right").each(function(){
str1 = $.trim($(".pp-post-content-awards").html()).length;
str2 = $.trim($(".pp-post-content-location").html()).length;
if(str1 == 0 && str2 == 0)
{
$(this).find(".pp-post-content-subtitle,.pp-post-content-location,.pp-post-content-awards").hide();
}
});

Answer 6

请参阅以下代码段：

＆＃13;

$('.pp-post-content-location li').each(function() {
   let locationContent = $(this).text();
   console.log(locationContent)
   if (locationContent == '') {
      $(this).css('display','none');
   }
});


$('.pp-post-content-awards').each(function() {
   let awardsContent = $('this').text();
   if (awardsContent = '') {
      $('this').css('display','none');
   }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pp-post-right-{post_id}" class="pp-post-right">
    <span class="pp-post-content-subtitle">Location</span>
    <div class="pp-post-content-location">                      <li>America</li>
    <li>America</li>
    <li>America</li>
    <li></li>
    <li>America</li>
    </div>
    <span class="pp-post-content-subtitle">Accolades &amp; Awards</span>
    <div class="pp-post-content-awards"><p>
    
    </p></div>
</div>

＆＃13;

如果元素不包含文本，则设置display：none

6 个答案: