更好的方法是使用每个jquery

Question

我有一个包含5个孩子（.item）的父div。 每个子div都是一个进度点，可以有三个选项：.past - .current - .future。 div是按顺序（从左到右）所以如果中间div（3）具有类.current，则前2个应该是过去，并且该div之后的2应该是future。

在我的例子中，我使用jQuery各自添加适当的类，它的工作原理。 但是，我很好奇是否有更好，更简洁的方法来实现这一目标？ （我确定有！）

小提琴： https ： //jsfiddle.net/remix1201/uxgv62z9/

HTML：

<div class="series-set-options">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

JS：

var flowStep = 3;

$(".series-set-options").children().each(function(i){
    if (flowStep > i){
        $(".series-set-options").children().eq(i).addClass("past");
    }
    if ( flowStep == i){
        $(".series-set-options").children().eq(i).addClass("current");
    }
    if (flowStep < i){
        $(".series-set-options").children().eq(i).addClass("future");
    }
});

Answer 1

改进代码很简单

1. 在each内部使用$(this)来引用当前元素
2. else if使用else if

码：

var flowStep = 3;

$(".series-set-options").children().each(function (i) {
    if (flowStep > i) {
        $(this).addClass("past");
    } else if (flowStep == i) {
        $(this).addClass("current");
    } else if (flowStep < i) {
        $(this).addClass("future");
    }
});

---

无需使用each() ，您可以使用:lt ＆ :gt选择器。

$('.series-set-options .item:lt(' + flowStep + ')').addClass('past');
$('.series-set-options .item').eq(flowStep).addClass('current');
$('.series-set-options .item:gt(' + flowStep + ')').addClass('future');

更新小提琴

 var flowStep = 3; $('.series-set-options .item:lt(' + flowStep + ')').addClass('past'); $('.series-set-options .item').eq(flowStep).addClass('current'); $('.series-set-options .item:gt(' + flowStep + ')').addClass('future'); 

 div { width: 100px; height: 100px; } .past { background: gray; } .current { background: white; } .future { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="series-set-options"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

Answer 2

您可以使用:eq()然后使用prevAll()和nextAll() DEMO

$(".item:eq(2)").addClass('current').prevAll('.item').addClass('past');
$(".item:eq(2)").nextAll('.item').addClass('future');

或者@Tushar建议单线DEMO

$(".item")
    .eq(flowStep)                         // flowStep = 2
    .addClass('current')                  // eq(2)
    .prevAll('.item').addClass('past')    // prevAll of eq(2)
    .end()                                // eq(2) end = go back to prev context
    .nextAll('.item').addClass('future'); // nextAll of eq(2)

Answer 3

您可以查看.each jQuery文档并查看其他参数对象。 在这种情况下，el将是您的子项。

var flowStep = 3;
flowStep = flowStep - 1;

$(".series-set-options .item").each(function(i,el) {
  if (flowStep > i) {
    $(el).addClass("past");
  }
  if (flowStep == i) {
    $(el).addClass("current");
  }
  if (flowStep < i) {
   $(el).addClass("future");
  }
});