2

我遇到了一个问题，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");
   }
});

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

4

5 回答 5

1

只需使用：

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

描述：选择器查找所有具有空源的 img 元素，并且父方法返回具有给定选择器的 paretns，最后用actuallu 隐藏隐藏 div.item 选择器。

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

$('img[src=""]').closest ('div.item').hide()
于 2013-02-18T20:03:03.800 回答
0

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

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

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

或者使用属性等于选择器[docs]：

$('div.item > a > img[src=""]').closest('div.item').addClass('hide');
于 2013-02-18T19:58:01.700 回答
0

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

我会使用eachjQuery 函数img。

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

在此处查看演示。

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

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

.hide {
    background: lightblue;
}

在此处输入图像描述

于 2013-02-18T20:01:42.197 回答
0

我修改了您的代码版本，因此您可以从中学习。您还将学习如何使用 $.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/

于 2013-02-18T20:01:46.617 回答
0

LIVE DEMO

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

另外，.hide()您可以使用.remove()

于 2013-02-18T20:07:16.790 回答