根据image src属性将类添加到父级

Question

我遇到的问题是CMS基于模板吐出图像网格，但如果项目的图像数量少于网格，它也会吐出空白。所以我想在父元素中添加一个类来隐藏基于空白图像src属性的空白。这就是我所拥有的：

HTML

<div class="item">
  <a href="#">
     <img src="image-1.jpg">
  </a>
</div>
<div class="item"> <!-- Need to add class of 'hide' -->
  <a href="#">
     <img src=""> <!-- Blank Img -->
  </a>
</div>

的jQuery

var image = $("div.item > a > img");
var srcs = image.attr('src');

$.each(image, function () {
   if(srcs.length == 0){
      $(this).closest('div').addClass("hide");
   }
});

因为我在这方面有点像菜鸟，所以它可能很简单。提前感谢您提供的任何帮助！

Answer 1

只需使用：

$('img[src=""]').parents ('div.item').hide()

描述： Selector找到所有带有空源的img元素，而parent方法返回带有给定选择器的paretns，最后用actuallu隐藏div.item选择器。

关于@Felix的建议，这更有效：

$('img[src=""]').closest ('div.item').hide()

Answer 2

image.attr('src')将始终返回第一个选定元素的src属性值。

您想测试每个元素的属性值。您可以使用.filter ^[docs]轻松完成此操作：

$('div.item > a > img').filter(function() {
    return $(this).attr('src').length === 0;
}).closest('div.item').addClass('hide');

或使用attribute equals selector ^[docs]：

$('div.item > a > img[src=""]').closest('div.item').addClass('hide');

Answer 3

使用.attr("src")将返回src属性。

我会为each使用img jQuery函数。

$("img").each(function () {
    if($(this).attr("src") == "") {
         $(this).closest('div').addClass("hide").text("Hide class was added.");
    }
});

请参阅演示here。

你可以看到下面的屏幕截图。

我为.hide使用了以下CSS样式：

.hide {
    background: lightblue;
}

Answer 4

我修改了您的代码版本，以便您可以从中学习。您还将学习如何使用$ .each（）。

 var image = $("div.item > a > img");

 $.each(image, function (idx, element) {
   if($(element).attr('src').length == 0){
      $(this).closest('div').addClass("hide");
       // remove
       $(this).closest('div').hide();
   }
});

你可以在小提琴上玩它

http://jsfiddle.net/r84NR/

Answer 5

的 LIVE DEMO

$('img[src=""]').closest('.item').hide();

另外，.hide()代替.remove()，您可以使用{{1}}