jQuery - Variable selectors in ForEach loop

Question

I've written a forEach loop which goes through an array of divs (by ID), selects child elements with a certain class and removes another class from them. I'm having a few issues turning the variable back into a selector and joining it to the other ones. As a result, my forEach loop doesn't work.

http://jsfiddle.net/NWmB5/7/ (Try clicking one of the links, the third item should turn black again if the code works)

var toDoCategories; 

$(document).ready(function() {

toDoCategories = [$("#testDiv"),$("#anotherDiv"),$("thirdDiv")]; 
setTimelinePosition($('#thirdDiv'));

$('#targetFirstDiv').click(function() {
setTimelinePosition($('#anotherDiv'));

});
$('#targetSecondDiv').click(function() {
setTimelinePosition($('#testDiv'));

});

});


/* Show current position on timeline */
function setTimelinePosition($position) {


var $theTimelineTrigger = $('span.timelineTrigger');

toDoCategories.forEach(function(currentCategory) {


var $deselectTimelinePositionElement = $(currentCategory, $theTimelineTrigger);

$($deselectTimelinePositionElement).removeClass('currentPosition');
});

You're missing a # in the thirdDiv selector, and this entire approach is horrible. — adeneo
– adeneo, Commented Jan 10, 2014 at 13:33
Thanks @adeneo. Whilst this code is only for an HTML prototype (and isn't going near production without a proper Developer rewriting most of it) I'd like to make it less "horrible". I think a sensible thing would be to apply a common class to all of the divs with the IDs which I later place in the array and use it to generate the array. I'd appreciate any tips you might have to make the developers less offended by this. — Adam Beizsley-Pycroft
– Adam Beizsley-Pycroft, Commented Jan 10, 2014 at 13:36

Arun P Johny · Accepted Answer · 2014-01-10 13:40:00Z

1

It should be as simple as

$(document).ready(function () {

    var $toDoCategories = $("#testDiv, #anotherDiv, #thirdDiv"); //NOTE HERE

    setTimelinePosition('#thirdDiv');

    $('#targetFirstDiv').click(function () {
        setTimelinePosition('#anotherDiv');
    });
    $('#targetSecondDiv').click(function () {
        setTimelinePosition('#testDiv');
    });

    /* Show current position on timeline */
    function setTimelinePosition(position) {
        $toDoCategories.find('.currentPosition').removeClass('currentPosition')
        $(position).find('.timelineTrigger').addClass('currentPosition');
    }
});

Demo: Fiddle

Another approach: Fiddle

answered Jan 10, 2014 at 13:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Beizsley-Pycroft Over a year ago

Thanks Arun. I'll have a go with the second approach you recommended.

Collectives™ on Stack Overflow

jQuery - Variable selectors in ForEach loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related