CODEWITHSUNDEEP
javascriptjqueryhtml
Suzi Larsen
Suzi Larsen

Reputation: 1490

How to get multiple indexes of parents of child divs with certain classes

I'm not sure if my title explains what I need to do properly but its the closest I could get.

I have been needing to get the indexes of divs with the class ui-selected and apply an additional class to the divs with the class "ui-selected" ...but also to the blocks directly above it so it creates a vertical line (best to see the demo link below to understand what I mean)

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

I've managed to do this but to a degree but I am only able to grab the first index of each div with ui-selected.

If you look at the example you can see that in each row there are blocks of 8 and these are contained in the parent div "fader-section".

I have managed to get multiple indexes for each div with "ui-selected" and this works ok in each indivudal "fader-section". If there is another ui-selected that starts in the next "fader-section" then it just doesn't work right.

Basically what I need to do is - anywhere there is the orange highlight "ui-selected" and the layer-lock is clicked I need to highlight every block above and below that.

I've tried using each that got me a little bit closer to what I needed to do and I tried doing the same with the fader-section but it just wasn't working, so I'm quite stuck now.

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

Upvotes: 2

Views: 117

Answers (4)

Artur Filipiak
Artur Filipiak

Reputation: 9157

I'm not sure if that's what you want, but I think you're looking for :eq(X) pseudo selector.
Also, inside loop you should refer to this (item in current iteration).
Using the .fader-empty.ui-selected, it will always return index of the very first item with .ui-selected class.

CODE UPDATED
(Added $('.fader-empty.moo23').length indicator)

$('.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

There's an example with fixed $('.fader-empty').click() method:
JSFiddle

Upvotes: 2

Chitrang
Chitrang

Reputation: 2114

If number of fader-section in each layer is same i.e. if your HTML structure is uniform then you can use that fact to toggle selected columns.

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/

Upvotes: 1

eugenesqr
eugenesqr

Reputation: 579

Not sure if I got the question right but the code below selects all the orange boxes and changes their color to green:

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

Upvotes: 0

Mark
Mark

Reputation: 4873

I could be wrong, but I think you are over-complicating your JS.

I think this will achieve what you want:

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


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

The toggle class will remove the class though if it is already there. If you are looking to keep those with the moo34 class everytime you click lock button, you will have to adjust this slightly to check for the moo34 class before add/togling it. If this is the case, you may want to try:

 $('.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');   
    });

Upvotes: 0

Related Questions