JQuery: How to use a for loop variable in a jquery selector?

Question

It's my first post here.

I am trying to make a photo gallery and I got the code below to work with my website. I want the same nth-child to be affected in .gallery when the same nth-child is hovered in the .preview class.

$(document).ready(function() {
    $(".preview > :nth-child(1)").mouseover(function() {
        $(".gallery > :nth-child(1)").css("opacity","1");
        $(".gallery :not( > :nth-child(1))").css("opacity","0");
    });
    $(".preview > :nth-child(2)").mouseover(function() {
        $(".gallery > :nth-child(2)").css("opacity","1");
        $(".gallery :not( > :nth-child(2))").css("opacity","0");
    });
    $(".preview > :nth-child(3)").mouseover(function() {
        $(".gallery > :nth-child(3)").css("opacity","1");
        $(".gallery :not( > :nth-child(3))").css("opacity","0");
    });
    $(".preview > :nth-child(4)").mouseover(function() {
        $(".gallery > :nth-child(4)").css("opacity","1");
        $(".gallery :not( > :nth-child(4))").css("opacity","0");
    });
});

I then thought about an easier way to do that using a for-loop. Later I am planning to add more children to both .gallery and .preview, so a for-loop will make the code much simpler. I think that in the code below the problem is with the for-loop variable i. Can you please look at the code below and see what I am doing wrong?

$(document).ready(function() {
    for (i = 1; i < preview.length; i++) {
        var selector1 = ".preview > :nth-child(" + i + ")";
        var selector2 = ".gallery > :nth-child(" + i + ")";
        var selector3 = ".gallery :not( > :nth-child((" + i + "))";
        $(selector1).mouseover(function() {
            $(selector2).css("opacity","1");
            $(selector3).css("opacity","0");
        });
    }
});

EDIT: Here is the HTML it applies to:

<div class="gallery">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="preview">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

EDIT: And here is CSS

.gallery > :nth-child(1) {
    background-image: url('https://sp.yimg.com/ib/th?id=HN.607997559404560656&pid=15.1&P=0');
    height: 500px;
    background-size: cover;
    opacity: 1;
}
.gallery > :nth-child(2) {
    background-image: url('http://www.kamionek.waw.pl/images/stories/2012/stadion_narodowy_ii_2012_kamionek_0001.jpg');
    height: 500px;
    background-size: cover;
    position: relative;
    top: -500px;
    opacity: 0;
    margin-bottom: -500px;
}
.gallery > :nth-child(3) {
    background-image: url('http://www.twojezaglebie.pl/wp-content/uploads/2012/02/stadion-narodowy-luty-2012_6521.jpg');
    height: 500px;
    background-size: cover;
    position: relative;
    top: -500px;
    opacity: 0;
    margin-bottom: -500px;
}
.gallery > :nth-child(4) {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/ac/Stadion_Narodowy_w_Warszawie_20120422.jpg');
    height: 500px;
    background-size: cover;
    position: relative;
    top: -500px;
    opacity: 0;
    margin-bottom: -500px;
}
.preview {
    height: 100px;
    width: 100px;
    width: 100%;
}
.preview div {
    height: 100px;
    width: 100px;
    background-size: cover;
    display: inline;
    float: left;
}
.preview > :nth-child(1) {
    background-image: url('https://sp.yimg.com/ib/th?id=HN.607997559404560656&pid=15.1&P=0');
}
.preview > :nth-child(2) {
    background-image: url('http://www.kamionek.waw.pl/images/stories/2012/stadion_narodowy_ii_2012_kamionek_0001.jpg');
}
.preview > :nth-child(3) {
    background-image: url('http://www.twojezaglebie.pl/wp-content/uploads/2012/02/stadion-narodowy-luty-2012_6521.jpg');
}
.preview > :nth-child(4) {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/ac/Stadion_Narodowy_w_Warszawie_20120422.jpg');
}

iCollect.it Ltd · Accepted Answer · 2015-01-11 15:59:12Z

You can do it using your existing system like this: http://jsfiddle.net/TrueBlueAussie/wn3c84ke/5/

$(document).ready(function () {
    $(".preview div").mouseover(function () {
        var $previews = $('.preview div');
        var $children = $(".gallery").children().not('.preview');
        var $selected = $children.eq($previews.index(this));
        $children.not($selected).css("opacity", "0");
        $selected.css("opacity", "1");
    });
});

Which uses the index position of the hover for the selection index, but I would actually recommend a data-driven approach like this: http://jsfiddle.net/TrueBlueAussie/wn3c84ke/7/

HTML:

<div class="gallery">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div class="preview">
        <div data-target="#one"></div>
        <div data-target="#two"></div>
        <div data-target="#three"></div>
        <div data-target="#four"></div>
    </div>
</div>

jQuery

$(document).ready(function () {
    $(".preview > div").mouseover(function () {
        var $children = $(".gallery >  *:not(.preview)");
        var $selected = $($(this).attr("data-target"));
        $children.not($selected).css("opacity", "0");
        $selected.css("opacity", "1");
    });
});

vbms · Accepted Answer · 2015-01-10 12:07:44Z

0

A way to do it with a loop would be:

$(document).ready(function() {
    $(".preview div").each(function(index,object){
        $(object).mouseover(function() {
            $(".gallery div").css("opacity","0");
            $(".gallery div")[index].css("opacity","1");
        });
    });
});

edited Jan 10, 2015 at 12:07

answered Jan 10, 2015 at 11:46

vbms

612 bronze badges

3 Comments

kyczawon Over a year ago

It made all of the divs in .gallery have the opacity of 0, when a div in .preview was hovered.

vbms Over a year ago

please try it again i updated it, just make sure its finding the element thats supposed to be visible, this is quite simple it should be working, you can also use the jquery methods hide and show instead of opacity. infact you should be useing display: none / block here

kyczawon Over a year ago

It still has the same result. To give you a clearer image of what I mean I have uploaded my code to jsfiddle.net/wn3c84ke/2. For some reason the javascript doesn't work on there... It works for me though. I used the simplest one javascript I have there.

Magnilex · Accepted Answer · 2015-01-10 12:12:21Z

0

Try this:

$(".preview").on("mouseover", function () {
    $(".gallery").children().index(this).css("opacity", "0");
    $(this).children().css("opacity", "1");
});

edited Jan 10, 2015 at 12:12

Magnilex

12k9 gold badges67 silver badges88 bronze badges

answered Jan 10, 2015 at 11:49

Sarath Kumar

2,3531 gold badge14 silver badges26 bronze badges

1 Comment

kyczawon Over a year ago

.gallery is not a child of .preview

Collectives™ on Stack Overflow

JQuery: How to use a for loop variable in a jquery selector?

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related