Как я могу связать UJS с серией элементов, которые имеют один и тот же класс?

Я не знаю, как перебирать что-либо в DOM, кроме элементов.

Итак, я знаю, как это сделать:

$("div").each(function (i) {
  if (this.style.color != "blue") {
    this.style.color = "blue";
  } else {
    this.style.color = "";
  }
});

Но я не знаю, как перебирать кучу объектов одного класса. Я не могу найти, как это сделать нигде. Кто-нибудь может помочь?

Я имею в виду, посмотрите на этот образец:

$(document.body).click(function () {
  $("div").each(function (i) {
    if (this.style.color != "blue") {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});</script>

Шутки в сторону? Хорошо, тогда почему во втором объявлении функции есть "i", а в первом нет? Какого черта это "я"? Почему он должен быть там, если на него нигде нет ссылок? И это с самого сайта jQuery. Боже, что мне не хватает?

Источник

4 ответа

Решение

i это индекс итерации, как i вы бы использовали в for структура петли. Это необязательный параметр для каждого, потому что он не обязательно нужен, потому что, если индекс не имеет значения для вашей внутренней логики, он не имеет значения.

Обратите внимание, что jQuery.each() Вызов статически отличается от вызова в коллекции jQuery. В первом i идет первым, а второй аргумент является фактическим значением, и его можно использовать для перебора любого массива, подобного объекту.

$([1,2,3,4,5], function(i,value){
  alert(i + '=' + value);
});

Принимая во внимание, что при вызове на коллекцию вы должны использовать this ссылаться на значение, потому что это элемент DOM.

$('a[href]').each(function(i){
   alert(i + '=' + $(this).attr('href');
});

Теперь, что касается вашего вопроса относительно CSS:

Я хочу запустить этот пример кода в событии mouseover.

$('div').mouseover(function(event){
   var $this = $(this);
   if($this.css('color') != 'blue'){
     $this.css('color', 'blue');
   }
});

Большая часть функции jquery автоматически перебирает коллекцию, применяя обратный вызов oyur к каждому элементу коллекции. Поэтому, когда вы делаете что-то с событием, вам не нужно использовать each, это подразумевается функцией привязки события, которую вы вызываете. Кроме того, с помощью функций привязки событий вы не получаете индекс в качестве аргумента для вашего обратного вызова, вместо этого вы получаете event объект.

Хотя в большинстве случаев вам не нужен доступ к событию, поскольку this связан с элементом, который вызвал событие, которое, как правило, то, что вы после, если вы не делаете что-то действительно сложное.

Источник

Если у вас возникли проблемы с размышлениями о том, как выбрать что-то в jQuery, прочитайте документацию по селекторам. Для ваших нужд:

$('.someclass').each(function(){
  var me = $(this);
  me.css('color', me.css('color')!='blue' ? 'blue' : '' );
});

Изменить: на основе новой информации (желание связать с событием наведения мыши):

$('.someclass').mouseover(function(){
  var me = $(this);
  me.css('color', me.css('color')!='blue' ? 'blue' : '' );
});
Источник

Если ваши элементы имеют класс "test", то ваш jQuery будет выглядеть так:

    $(".test").each(function () {
      if (this.style.color != "blue") {
        this.style.color = "blue";
      } else {
        this.style.color = "";
      }
    });

Обновление: наведение мыши

    $(".test").mouseover(function () {
      if ($(this).css('color') != "blue") {
        $(this).css('color', 'blue');
      } else {
        $(this).css('color', '');
      }
    });
Источник

Документация jQuery о методе.each объясняет, какие параметры передаются в функцию.

jQuery.each (collection, callback (indexInArray, valueOfElement)) collection: объект или массив для итерации. обратный вызов (indexInArray, valueOfElement): функция, которая будет выполняться для каждого объекта.

Источник
Другие вопросы по тегам