Jquery: 根据属性给某些div添加css class

Question

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

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

...等等。

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

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

Answer 1

快速而肮脏：

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

Answer 2

看到这个fiddle：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');              
              }

        });


    });

})

Answer 3

试试这个：

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");
        });
    });
});

编辑：我在 fiddle 上工作时一直打开 post window，我看到你已经得到了一些非常相似的答案。

Jquery: 根据属性给某些div添加css class

Jquery: Adding css class to certain divs based on attributes

javascript

css

each

jquery