Question

我的 HTML

<div class="parent">
    <span class="child">1</span>
    <span class="child">2</span>
    <span class="child">3</span>
    <span class="child">4</span>
    <span class="child">5</span>
</div>

以及 CSS

.parent .child {
    border : 1px solid black;
    display :inline-block;
    width:40px;
    height:25px;
    text-align:center;
    cursor:pointer;
}
.mark {
    background-color: green;
}

和简单点击事件，以查看下面的选定元素。

$(".parent > .child").click(function(e){
    if(e.shiftKey) {
        $(".parent .child").each(function(){
            $(this).addClass("mark");
        });
    }
    else {
        $(this).addClass("mark");
    }
});

已编辑：当我使用shiftKey单击一个元素和另一个元素时，这两个元素之间应添加类mark。但我的代码将所有元素迭代为$(".parent > .child")....我想避免它（我的意思是如果它们之间有2个元素，我想用迭代迭代4次（包括start和element））

我的问题是我可以在两个选定元素之间进行迭代（包括）而不是从其父元素进行迭代（在我的情况下，我不想从parent迭代） ？我知道开始和结束元素。如果是这样，为什么我需要迭代所有元素并检查它们的状态？ JSFiddle链接。

明确问题......

我有10个HTML元素，假设3是开始，6是结束。我想迭代为

(for var i=3 ; i <=6 ; i++) {...}

而不是迭代所有元素并将其状态检查为

(for var i=1 ; i <=10 ; i++) {
 // checking is it between start and end elements
}

Answer 1

Demo

试试这个演示。不确定它是否能满足您的需求。评论是否需要更改。

$(".parent .child").click(function () {
    if($(".parent .child.mark:first").length == 1 && !$(this).hasClass('mark')){
        firstIndex = $(".parent .child.mark:first").index();
        thisIndex = $(this).index();
        start = Math.min(thisIndex, firstIndex);
        end = Math.max(firstIndex, thisIndex) + 1;
        $('.parent .child').slice(start, end).each(function(){
            $(this).addClass('mark');
        })
    } else {
        $(this).addClass('mark');
    }
});

Answer 2

您的问题不明确，但您是在说like this

下一个元素的Jquery是：

$(".parent .child").click(function(){
    $(this).addClass("mark");
    $(this).next().addClass('mark');
    if($(this).is(':last-child')){
        $('.parent .child:first-child').addClass('mark');
    }
});

如果元素是最后一个孩子，那么首先添加类标记，这是我迄今为止的假设。

Answer 3

为什么不使用它：

$（＆＃34; .mark＆＃34;）。nextUntil（＆＃34; .mark＆＃34;）。css（＆＃34; color＆＃34;，＆＃34; red＆＃34;）;

$（＆＃34; .mark＆＃34;） - ＆gt;这是您的第一个点击项目 .nextUntil（＆＃34; .mark＆＃34;） - ＆gt;这是你的第二次点击

希望它能起作用

JQuery：在开始和结束元素之间进行迭代

3 个答案: