Jquery：根据属性将css类添加到某些div答案

【问题标题】：Jquery: Adding css class to certain divs based on attributesJquery：根据属性将css类添加到某些div
【发布时间】：2015-04-24 21:53:10
【问题描述】：

我有几个 div 都有一个名为 number 的属性。

<div class="foo" number="1"></div>
<div class="foo" number="2"></div>
<div class="foo" number="3"></div>

...等等。

当我单击其中一个时，我会捕获该数字并将其存储在一个变量中。然后我想运行一个函数，为 f.eks 添加一个额外的类：所有 div 的数字属性在 [我点击的那个] 到 +7 之间。

有点像一些日期选择器所做的。我该怎么做。我尝试使用 each()，但失败了。

【问题讨论】：

你写过代码了吗？
你说你试过each()。您可以发布您尝试过的代码吗？
添加一些你尝试过的代码
由于存在自定义数据属性（例如data-number="3"），您应该使用这些属性而不是自己编写。
属性始终存储为字符串值，因此如果您将属性用作字母数字值，则需要在使用它们之前对其进行解析。但请提供一些代码，例如。通过 jsfiddle。

标签： javascript jquery css each

【解决方案1】：

试试这个：

http://jsfiddle.net/dejvidpi/36th41k6/2/

它使用与您说的相同的方法 - 获取点击的 ID，然后遍历所有 div 和标记选择 + 7。

这有点浪费，因为它循环遍历所有 div，但它应该为您指明正确的方向。

$(document).ready(function(){
    $('div').click(function(){
        $('div').removeClass("active");

        var id = parseInt($(this).attr("number"));

        $.each($('div'), function(index, item){
            var currId = parseInt($(item).attr("number"));
            if (currId >= id && currId <= id + 7)
                $(item).addClass("active");
        });
    });
});

编辑：我在玩小提琴时一直打开帖子窗口，我看到你已经得到了一些非常相似的答案。

【讨论】：

【解决方案2】：

看到这个小提琴：http://jsfiddle.net/nd2e33dp/

你可以写一个这样的函数

$(function(){
    $('.foo').click(function(e){

        var num=parseInt($(this).attr('data-number'));


        $('.foo').each(function(i,ele){
             var compare=parseInt($(e.target).attr('data-number'))+7;
              var eleNumber=parseInt($(ele).attr('data-number'));
           if( eleNumber>=num && eleNumber<compare)
              {
                  console.log('in');
        $(ele).addClass('red');              
              }

        });


    });

})

【讨论】：

太棒了。非常感谢！我有 parseInt，但完全错误地使用了 each()！这样就更清楚了！
@user3426703.. 乐于助人

【解决方案3】：

又快又脏：

$(document).ready(function(){
$(".foo").click(function(){
 var low = parseInt($(this).attr("number"));
 var high = low + 7;  

    $(".foo").each(function(){
          var num = $(this).attr("number");
          if (num > low && num < high){
             //YourFunction   
          }
      });
});   
});

【讨论】：