Добавить класс к родительскому объекту на основе атрибута 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()

Описание: Selector найти все Img элементы с пустым источником и родителей метод возврата paretns с данный селектор и окончательная скрыть с помощью actallu скрывает селектор div.item.

относительно того, что @Felix предполагает, что это более efficeint:

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

источник

2013-02-18 20:03:03 Boynux

'.closest' лучше, чем' .parents' в этом случае. –

Я так не думаю. Я отфильтровал div с классом предметов, так что это не проблема. Но, безусловно, самое близкое будет работать отлично. оставьте это до @Archetype и контекста – Boynux

Ну, '.parents' будет излишне пересекать DOM даже после того, как найдет первый элемент' div.item'. Лучше избегать ненужных вычислений, не так ли? И поскольку OP уже использует его, я бы просто сохранил его. –

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

Спасибо Джон! Я использовал это и в итоге ушел от addClass и просто использовал .remove, чтобы очистить его. – Archetype

Я изменил свою версию кода, так что вы можете узнать из него. Вы также узнаете, как использовать $ .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 изображения

ответ

Смежные вопросы