Добавить атрибут на основе размеров изображения

Question

Я работаю для клиента, который использует стороннюю платформу, которая позволяет мне только переопределять CSS и частично редактировать шаблоны HTML. Я также могу внести изменения, добавив Javascript, и в этом случае мне нужно добавить классы и идентификаторы, основанные на измерениях миниатюрных изображений, представленных в виде изображений в элементах списка. Я начал играть на скрипке, заменяя изображения на div.

http://jsfiddle.net/dbudell/SYTsP/4/

Вот HTML-код:

<ul>
  <li><div class="item item1"></div></li>
  <li><div class="item item2"></div></li>
</ul>

И CSS. Как вы можете видеть, я установил.item1 для "портретных" измерений и.item2 для "альбомных". Я хочу добавить идентификаторы на основе этих измерений:

li {
   display:inline-block;
   margin:5px;
}

.item1, .item2 {
  border:1px solid #333;
}

.item1 {
   width:100px;
   height:200px;
}

.item2 {
    width:200px;
    height:100px;
}

#fill-portrait {
  background:#333;
}

#fill-landscape {
  background:#888;
}

А вот код JQuery, который кажется синтаксически правильным, но не дает результатов. Не уверен, в чем проблема.

var itemWidth = $('.item').width();
var itemHeight = $('.item').height();

if (itemWidth > itemheight) {
  $('.item', this).addAttr('id','fill-landscape');
} else {
  $('.item', this).addAttr('id','fill-portrait');
}

Опять же, ссылка на скрипку - http://jsfiddle.net/dbudell/SYTsP/4/.

Answer 1

Есть несколько вещей, которые выглядят неправильно:

• опечатка в вашем текущем коде itemheight должно быть itemHeight
• addAttr("id, "value") должно быть attr("id", "value")
• this в вашем селекторе $("li", this) ссылается на window который не может быть использован в селекторе, как это $("li", this).length = 0
• вы получаете доступ только к первому li ты сталкиваешься и не все li элементы в ul

---

ДЕМО - Сочетание всего вышеперечисленного

---

Я использовал ваши существующие HTML и CSS в вышеприведенном DEMO и следующем скрипте:

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.attr('id', 'fill-landscape');
  } else {
    $item.attr('id', 'fill-portrait');
  }
});

---

Примечание по идее против класса
Если вы планируете иметь несколько из этих элементов, используя один и тот же id значения, которые вы можете вместо этого переключать на классы, то есть: .addClass("fill-landscape") вместо attr("id", "fill-landscape"), id значения должны быть уникальными. Это будет недействительным HTML и селекторы jQuery также соответствуют только первому соответствию id и не вернет коллекцию. Конечно, это будет означать, что вы должны обновить свой CSS, а также #fill-landscape в .fill-landscape,

---

ДЕМО - Использование классов вместо идентификаторов на всякий случай

---

Вышеприведенный DEMO использовал следующий измененный CSS (#fill-x теперь.fill-x):

.fill-portrait {
  background:#333;
}
.fill-landscape {
  background:#888;
}

Измененный скрипт (используя .addClass() вместо .attr()):

var $listItems = $("ul>li");

$listItems.each(function () {
  var $item = $(this);
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.addClass('fill-landscape');
  } else {
    $item.addClass('fill-portrait');
  }
});

Answer 2

Вам нужно выбрать отдельные элементы, которые вы пытаетесь получить размеры. В противном случае ваш селектор $('li') выбирает каждый элемент "li" на странице. Например:

$('.item1').height();

Затем вы можете добавить идентификатор следующим образом:

$('.item1').attr('id', 'blah');

Явный пример http://jsfiddle.net/SYTsP/7/:

var $item1 = $('.item1');
var $item2 = $('.item2');

setId($item1);
setId($item2);

function setId($item){
  var itemWidth = $item.width();
  var itemHeight = $item.height();

  if (itemWidth > itemHeight) {
    $item.parent('li').attr('id','fill-landscape');
  } else {
    $item.parent('li').attr('id','fill-portrait');
  }
}

Теперь с большей итерацией!

http://jsfiddle.net/SYTsP/9/