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

改善代码的简单方法

使用$(this)内的each来引用当前元素
使用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＆amp; :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');

Updated Fiddle

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

更好的方法是使用每个jquery

3 个答案: