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要素を検索し、親メソッドは、指定されたセレクターでパラメーターを返し、最後に、actualluで非表示にしてdiv.itemセレクターを非表示にします。

@Felixが示唆していることに関しては、これはより効果的です。

$('img[src=""]').closest ('div.item').hide()
于 2013-02-18T20:03:03.800 に答える
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

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

LIVE DEMO

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

さらに、代わりに.hide()使用することができます.remove()

于 2013-02-18T20:07:16.790 に答える