Question

我不确定我的头衔是否能说明我需要做什么，但它是我能得到的最接近的。

我一直需要使用ui选择的类来获取div的索引，并使用类＆＃34; ui-selected＆＃34;来为div添加一个额外的类。 ...还有它正上方的块，所以它创建了一条垂直线（最好看下面的演示链接，了解我的意思）

https://jsfiddle.net/susannalarsen/6b2s1hhc/#base

我设法做到这一点，但在某种程度上，但我只能用ui选中的每个div的第一个索引。

如果您查看示例，您可以看到每行中有8个块，这些块包含在父div＆＃34; fader-section＆＃34;中。

我已经设法为每个div获取多个索引＆＃34; ui-selected＆＃34;这在每个单独的＆＃34;推子部分＆＃34;中都可以正常工作。如果还有另一个ui选择，则在下一个＆＃34;推子部分＆＃34;那它就行不通。

基本上我需要做的是 - 任何有橙色突出显示的地方＆＃34; ui-selected＆＃34;单击图层锁定我需要突出显示上面和下面的每个块。

我已经尝试过使用每一个让我更接近我需要做的事情，并尝试对推子部分做同样的事情，但它不起作用，所以我＆＃39;我现在很困难。

HTML：

<a href="#" class="layer-lock">I am a lock</a>
<div class="new-layer">
    <div class="sub-layer">
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty ui-selected"></div>
            <div class="fader-empty ui-selected"></div>
            <div class="fader-empty ui-selected"></div>
            <div class="fader-empty ui-selected"></div>
            <div class="fader-empty ui-selected"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty ui-selected"></div>
            <div class="fader-empty ui-selected"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty ui-selected"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
    </div>
</div>
<!--new layer-->
<div class="new-layer">
    <div class="sub-layer">
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
    </div>
</div>
<!--new layer-->
<div class="new-layer">
    <div class="sub-layer">
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
        <section class="fader-section">
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
            <div class="fader-empty"></div>
        </section>
    </div>
</div>

CSS：

.layer-lock {
    position:absolute;
    width:200px;
    height:60px;
    background:green;
    z-index:99;
}
.new-layer {
    clear:both;
    white-space:nowrap;
    float:left;
    background:#f1f1f1;
    padding:10px 0px 10px 10px;
    font-size:0;
}
.sub-layer {
    margin-top:10px;
}
.fader-section {
    display:inline-block;
    margin-right:10px;
}
.fader-empty {
    background-color:#e5e7ea;
    border-left:1px solid #a1a1a1;
    border-top:1px solid #a1a1a1;
    border-bottom:1px solid #a1a1a1;
    height:240px;
    width:44px;
    display:inline-block;
    position:relative;
    font-size:12px;
    cursor:pointer;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.shoo {
    background-color:green !important;
}
.ui-selected {
    background:orange;
}
.layer-locked {
    background:red;

}
.moo23 {
    background:green;
}

SCRIPT：

$('.layer-lock').click(function() {

    $(".fader-empty.ui-selected").each(function(index) {
        console.log(index);
        console.log("suz" + newindex);
        var newindex = $('.fader-empty.ui-selected').index();       
        var findex =$('.fader-empty.ui-selected').parent('.fader-section').index();


        var moo =  $('.fader-section:nth-child(' + (findex + 1) + ')').find('.fader-empty:nth-child(' + (newindex + index +1) + ')');

        $(moo).toggleClass('moo23');
    });
});


$('.fader-empty').click(function() {
    $(this).toggleClass('ui-selected');   
});

Answer 1

我不确定这是不是你想要的，但我认为你正在寻找:eq(X)伪选择器。
此外，在内部循环中，您应该参考this（当前迭代中的项目）使用.fader-empty.ui-selected，它将始终返回index类{。}}的第一个项目的.ui-selected。

CODE UPDATED
（添加了$('.fader-empty.moo23').length指标）

$('.layer-lock').click(function() {
    var l = $('.fader-empty.moo23').length;
    $(".fader-empty.ui-selected").each(function() {
        var newindex = $(this).index();
        var findex   = $(this).parent().index();
        var item     = $('.new-layer').find('.fader-section:eq('+findex+') .fader-empty:eq('+newindex+')');
        l && item.removeClass('moo23') || item.addClass('moo23');
    });
});

~~JSFiddle~~ JSFiddle

有一个固定$('.fader-empty').click()方法的示例：
JSFiddle

Answer 2

如果每个图层中的推子部分数相同，即如果您的HTML结构是统一的，那么您可以使用该事实来切换选定的列。

JS：

$('.layer-lock').click(function () {
    var oneRowElems = $('.sub-layer:eq(0) .fader-section:eq(0) .fader-empty').length * $('.sub-layer:eq(0) .fader-section').length;
    var totalRows = $('.sub-layer').length;
    var totalElems = oneRowElems * totalRows;

    var selectedColumns = {};

    $(".fader-empty").each(function (index) {
        if ($(this).hasClass('ui-selected')) {
            selectedColumns[index % oneRowElems] = 1;
        }
    });

    for (var i in selectedColumns) {
        // Toggle Columns Above
        for (var j = parseInt(i) - oneRowElems; j > 0; j -= oneRowElems) {
            $('.fader-empty').eq(j).toggleClass('moo23');
        }

        // Toggle Columns Below
        for (var j = parseInt(i); j < totalElems; j += oneRowElems) {
            $('.fader-empty').eq(j).toggleClass('moo23');
        }
    }
});

$('.fader-empty').click(function () {
    $(this).toggleClass('ui-selected');
});

的jsfiddle：

https://jsfiddle.net/5k6t31zp/1/

https://jsfiddle.net/5k6t31zp/3/

Answer 3

我可能错了，但我认为你的JS过于复杂。

我认为这会实现你想要的目标：

$('.layer-lock').click(function() {
    $(".fader-empty.ui-selected").each(function() {
        $(this).toggleClass("moo34");
    });
});


$('.fader-empty').click(function() {
    $(this).toggleClass('ui-selected');   
});

如果已经存在，那么toggle类将删除该类。如果您希望每次单击锁定按钮时都保留moo34类，那么在添加/添加moo34类之前，您必须稍微调整一下以检查moo34类。如果是这种情况，您可以尝试：

 $('.layer-lock').click(function() {
        $(".fader-empty.ui-selected").each(function() {
            if(!$(this).hasClass("moo34")){
                 $(this).addClass("moo34");
             }
          });
    });


    $('.fader-empty').click(function() {
        $(this).toggleClass('ui-selected');   
    });

Answer 4

不确定我的问题是否正确，但下面的代码会选择所有橙色框并将其颜色更改为绿色：

$('.layer-lock').click(function() {
    $(".fader-empty.ui-selected")
        .parent(".fader-section")       
        .children(".ui-selected")
        .each(function(index, element) {            
            $(element).toggleClass('moo23');
        });
});

如何获取具有某些类的子div的父项的多个索引

4 个答案: