根據圖像的src屬性向父級添加類

我遇到了一個問題，即CMS正在根據模板吐出圖像網格，但是如果項目的圖像比網格少，則會將空白吐出好。所以我想添加一個到父元素的類來隱藏基於空白圖像src屬性的空白。以下是我有：根據圖像的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"); 
    } 
});

因爲我在這是一個有點小白，它可能簡單的東西。預先感謝您提供的任何幫助！

來源

2013-02-18 Archetype

只需使用：

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

說明：選擇找到空的源和家長方法的返回paretns所有IMG元素給出選擇器，並最終隱藏與actuallu隱藏div.item選擇器。

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

來源

2013-02-18 20:03:03 Boynux

在這種情況下，'.closest'比'.parents'更好。 – 2013-02-18 20:05:02

我不這麼認爲。我用item類過濾了div，所以這不是問題。但是，最接近的將會完美地工作。把它留到@Archetype和context – Boynux 2013-02-18 20:06:58

那麼'.parents'將會不必要地遍歷DOM，即使它找到第一個'div.item'元素。避免不必要的計算會更好，不是嗎？而且由於OP已經在使用它，我會保留它。 – 2013-02-18 20:09:55

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');

來源

2013-02-18 19:58:01

使用.attr("src")將返回src屬性。

我會使用each jQuery功能爲img。

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

查看演示here。

你可以看到屏幕拍攝波紋管。

我用下面的CSS樣式.hide：

.hide { 
    background: lightblue; 
}

enter image description here

來源

2013-02-18 20:01:42

感謝約翰：關於什麼@Felix表明，這是更efficeint

！我使用了這個，最終離開了addClass，只是使用.remove來清理它。 – Archetype 2013-02-18 21:11:55

我修改您的代碼版本，這樣你就可以從中吸取教訓。您還將學習如何使用$ .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-18 20:01:46

LIVE DEMO

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

另外的代替.hide()可以使用.remove()

來源

2013-02-18 20:07:16

根據圖像的src屬性向父級添加類

回答

相關問題