Question

我不知道如何迭代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网站本身。 Sheesh，我错过了什么？

Answer 1

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，它会被您调用的事件绑定函数所隐含。通常使用事件绑定函数，您不会将索引作为回调的arg，而是获得event对象。

大多数时候，你实际上并不需要访问事件，因为this被绑定到触发事件的元素，这通常是你的事情，除非你做的事情非常复杂。

Answer 2

如果您在思考如何在jQuery中选择某些内容时遇到问题，请转到read the documentation on selectors。根据您的需求：

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

Answer 3

如果你的元素有“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', '');
      }
    });

Answer 4

jQuery的.each方法文档解释了传递给函数的参数是什么。

jQuery.each（集合，回调（indexInArray，valueOfElement）） collection：要迭代的对象或数组。 callback（indexInArray，valueOfElement）：将在每个对象上执行的函数。

如何将UJS绑定到一系列具有相同类的元素？

4 个答案: