Jquery: найти изображение по ширине и добавить класс

У меня есть много элементов div с одним и тем же классом, а внутри элементов div содержится изображение:

<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
.
.
.

Я хочу найти изображение, которое, если ширина изображения меньше 200 пикселей, добавляет класс только к этому изображению шириной менее 200 пикселей.

Например:

var imgWidth = $(".card_div img").width();
if (imgWidth < 200) {
$(".card_div img").css({margin:"8px 8px 8px 17px", "background-color":"blue"});  
}

Но этот код добавляет поля и фон к каждому элементу div изображения. Я не могу изменить имя элемента div. Все div имеют одинаковое имя.

Я хочу только добавить свойство css к img, что его меньше ‹ 200.

Возможно? Спасибо


image jquery css width addclass
person hyperrjas    schedule 20.12.2011    source источник
comment
Извините, но у меня много div того же класса... Извините за ошибку: D Я отредактировал сообщение   -  person hyperrjas    schedule 20.12.2011

Ответы (2)


arrow_upward
3
arrow_downward

HTML-разметка, которую вы опубликовали, не самая лучшая, но, используя именно эту разметку, я настроил этот пример того, как вы достигнете желаемого результата: http://jsfiddle.net/xFSLN/1/

HTML:

<div class="card_div"><img src="http://placekitten.com/199/199" alt="name_image"></div> 
<div class="card_div"><img src="http://placekitten.com/200/200" alt="name_image"></div> 
<div class="card_div"><img src="http://placekitten.com/300/300" alt="name_image"></div> 
<div class="card_div"><img src="http://placekitten.com/100/100" alt="name_image"></div>

CSS:

.under-200 {
    margin: 8px 8px 8px 17px;
    background-color: blue;
}

JavaScript:

$('div.card_div]').find('img').each(function () {
     var $this = $(this), width = $this.width();
    if (width < 200) {
        $this.addClass('under-200');
    }
});

Я бы настоятельно рекомендовал изменить HTML-код, чтобы он был более корректным.

  1. Все ваши идентификаторы должны быть уникальными
  2. Не включайте «#» в свой идентификатор
  3. Используйте имена классов, когда это уместно

ОБНОВЛЕНО: вы обновили разметку, чтобы улучшить ее. Я обновил ответ, чтобы отразить ваши изменения.

person McHerbie    schedule 20.12.2011
comment
Идентификаторы не должны начинаться с #. И он должен быть уникальным. Вместо этого добавьте класс. - person vinay; 20.12.2011
comment
@vinay McHerbie объявлял разметку, как и ОП, я уверен, что он это знает - см. Пункт 2 его списка рекомендаций. - person Rich O'Kelly; 20.12.2011
comment
@vinay, в моем ответе использовалась исходная предоставленная разметка. - person McHerbie; 20.12.2011
comment
@hyperrjas, я обновил свой ответ и пример JSFiddle, чтобы использовать вашу обновленную разметку. - person McHerbie; 20.12.2011
comment
Wuauuuuuuuuuuuu @McHerbie отлично работает :D Большое спасибо! - person hyperrjas; 20.12.2011
comment
@McHerbie, в этом случае возможно центрировать изображение внутри div .card_div с новым классом до 200. Я пробую центрировать с маржой: 0 авто, но у меня не работает нормально. в html div align center... центрируйте img внутри div... - person hyperrjas; 20.12.2011
comment
Исправлено и теперь работает нормально: D Я заменил внутри $this.addClass('under-200'); Я поставил $('div.pined_index').css(text-align,center); Огромное спасибо - person hyperrjas; 20.12.2011

arrow_upward
1
arrow_downward

Попробуйте следующее:

$("div.card_div > img").filter(function() {
  return $(this).width() < 200;
).css({margin:"8px 8px 8px 17px", "background-color":"blue"});

Или, желательно, если бы у вас был класс css с необходимым стилем:

$("div.card_div > img").filter(function() {
  return $(this).width() < 200;
).addClass('cssClassHere');
person Rich O'Kelly    schedule 20.12.2011