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

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

1 голос
/ 20 декабря 2011

У меня есть много div с тем же class , и внутри 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"});  
}

Но этот код добавляет поля и фон для каждого изображения divs Я не могу изменить имя divs. Каждый div имеет одинаковое имя.

Я хочу только добавить свойство css к значению img, которое меньше <200. </p>

Это возможно? Спасибо

Ответы [ 2 ]

3 голосов
/ 20 декабря 2011

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. Не включайте '#' в свой ID
  3. Используйте имена классов, когда это уместно

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

1 голос
/ 20 декабря 2011

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

$("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');
...