访问 .each() 上的当前项目

Question

我有以下代码：

HTML

<div id="step-holder">
    <div class="step-no">1</div>
    <div class="step-dark-left"><a href="#">Basic details</a></div>
    <div class="step-dark-right">&nbsp;</div>
    <div class="step-no-off">2</div>
    <div class="step-light-left"><a href="#">SEO</a></div>
    <div class="step-light-right">&nbsp;</div>
    <div class="step-no-off">3</div>
    <div class="step-light-left"><a href="#">Preview</a></div>
    <div class="step-light-round">&nbsp;</div>
    <div class="clear"></div>
</div>

JQUERY

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $(this).parent('.step-light-left').each(function () {
        $(this).removeClass('.step-light-left').addClass('.step-dark-left');
    });
});

但第二个 $(this) （在 .each 内）仍然引用原始的 $(this) >。 所以，它不起作用。

如何才能实现这一目标？我不明白为什么第二个 $(this) 不引用 .each() 当前项目。

或者，如果您有另一种解决方案，可以将所有 step-light-left 更改为 step-light-right ，反之亦然。

我需要做的是关闭所有“未点击”的 div 并打开点击的 div。

Answer 1

您可以使用一系列方法完成更新问题中提出的问题。

$('#step-holder a').click(function(e) {
    e.preventDefault();
    $(this).parent()
        .removeClass('step-light-left')
        .addClass('step-dark-left')
        .siblings('.step-dark-left')
        .removeClass('step-dark-left')
        .addClass('step-light-left');
});

演示位于 http:// /jsfiddle.net/gaby/zSXnm/3/

Answer 2

“#step-holder a”的父级是包含“a”标签的 div，而不是 #step-holder div。我添加了另一个父函数调用：

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $(this).parent().parent().find('.step-light-left').each(function () {
        $(this).removeClass('step-light-left').addClass('step-dark-left');
    });
});

Answer 3

解决方案：

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $('#step-holder > div').each(function () {
        if ($(this).attr('class') == 'step-dark-left') {
            $(this).removeClass('step-dark-left');
            $(this).addClass('step-light-left');
        }
    });
    $(this).parent().removeClass('step-light-left');
    $(this).parent().addClass('step-dark-left');
});

Answer 4

您的问题可能不是由于 this 的范围造成的。

这行是错误的：

$(this).removeClass('.step-light-left').addClass('.step-dark-left');

应该是：

$( this).removeClass('step-light-left').addClass('step-dark-left');

没有点。尝试一下。

添加 Chris 评论：您实际上不需要使用 .each()，您可以直接在选择器上添加/删除类。

更多补充：如果你想关闭所有“未点击”的div并打开点击的div，如果你定义一个名为“active”或其他名称的类会怎么样。然后，您只需在单击函数中执行类似的操作：

$('#step-holder .active').removeClass('active');
$(this).parent().addClass('active');