Question

我有一个旋转木马，并且在每个图像中都有一个嵌套的URL，一些URL将包含其他不会的文本。我面临的问题是即使没有该URL的文本，URL的样式也会出现。如果没有文字，我想隐藏URL。下面是我的HTML结构

var CaptionItems = $('#slideshow').find('.Caption');

$(CaptionItems).each(function() {
  if (CaptionItems.text() === "") {
    $('#slideshow').find('.Caption').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow" class="owl-wrapper-outer">
  <div class="owl-wrapper owl-origin">
    <div class="item">
      <a href="#" class="Caption">Nothing to see, move along!</a>
      <img src="#" alt="barbady.jpg">
    </div>
  </div>
  <div class="owl-item" style="width: 679px;">
    <div class="item">
      <a href="#" class="Caption"></a>
      <img src="#" alt="rubics.png">
    </div>
  </div>
  <div class="owl-item" style="width: 679px;">
    <div class="item">
      <a href="#" class="Caption">Some Text</a>
      <img src="#">
    </div>
  </div>
</div>
</div>

我在控制台中检查了这一点，它似乎隐藏了CaptionItems中包含的内容，但没有隐藏在实际页面上的内容。任何指针都会受到赞赏。

Answer 1

您的问题是因为您需要在迭代中引用当前元素的文本，而不是所有元素在一起。试试这个;

var CaptionItems = $('#slideshow').find('.Caption');
$(CaptionItems).each(function () {
   if ($(this).text().trim() === "") {
       $(this).hide();
   }
});

请注意上面使用this关键字，并直接在hide()元素上调用.Caption。

另请注意，您可以使用filter()：

使此代码更简单

$('#slideshow .Caption').filter(function() {
    return $(this).text().trim() == '';
}).hide();

Answer 2

使用＆＃39; this＆＃39;用于隐藏循环中当前项的关键字。

＆＃13;

$('.Caption').each(function () {
 if ($(this).text().trim() === "") {
 $(this).hide();
 }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-wrapper-outer">
 <div class="owl-wrapper owl-origin">
  <div class="item">
  <a href="#" class="Caption">Nothing to see, move along!</a>
  <img src="#" alt="barbady.jpg">
  </div>
 </div>
<div class="owl-item" style="width: 679px;">
  <div class="item">
  <a href="#" class="Caption"></a>
  <img src="#" alt="rubics.png">
</div>
</div>
<div class="owl-item" style="width: 679px;">
   <div class="item">
   <a href="#" class="Caption">Some Text</a>
   <img src="#">
   </div>
</div>

＆＃13;

如果条件为真，则循环遍历元素数组并隐藏元素

2 个答案: