Add and remove class element children

Question

I have this checkmark block. As the name says, it draws a check mark similar to the one we have here, on Stackoverflow. I want both of those elements (checkmark_stem and checkmark_kick) turn green when they're active, so I tried to do this:

window.setInterval(function () {
        $('body').find('.checkmark').each(function (index) {
            var current = $(this);
            console.log(current);
            var url = current.data('refresh');
            console.log(url);
            var child = current.children;
            var answerID = current.data('answer');
            console.log(child);
            $.get(url + '?id=' + answerID, function (data) {

                data = JSON.parse(data);

                if(data.rating.solved_date === null)
                    current.children[0].removeClass('active');
                else
                    current.children[1].addClass('active');



            });
        });
    }, 1000);

but it seems I'm not doing this correctly. Is there any way to addClass('active') to both elements?

My element html

<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}" >
            <div class="checkmark" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="{$answer['answerid']}" data-question="{$question['publicationid']}">
                <div class="checkmark_kick" title="Unnacept this answer"></div>
                <div class="checkmark_stem" title="Unnacept this answer"></div>
            </div>
        </blockquote>

EDIT: I had like this before and it worked. I just wanted the mark to look more like a check

<blockquote class="accept-answer text-right {if !$isMine} hidden{/if}" >
            <div class="accept" title="Accept this answer" data-url="{url('controller/api/questions/mark_as_solved')}" data-refresh="{url('controller/api/questions/refresh_accepted_answers')}" data-answer="{$answer['answerid']}" data-question="{$question['publicationid']}">
                <div class="accepted up" title="Unnacept this answer"></div>
            </div>
        </blockquote>



window.setInterval(function () {
        $('body').find('.accepted.up').each(function (index) {
            var current = $(this);
            console.log(current);
            var url = current.parent().data('refresh');
            console.log(url);
            var parent = current.parent();
            var answerID = parent.data('answer');
            console.log(answerID);
            $.get(url + '?id=' + answerID, function (data) {

                data = JSON.parse(data);

                if(data.rating.solved_date === null)
                    current.removeClass('active');
                else
                    current.addClass('active');



            });
        });
    }, 1000);

Kind regards

You can use jQuery to select both children div and add 'active' class to them. - https://api.jquery.com/multiple-selector/. Is that what you are looking for? — vabii, May 11 '17 at 19:09
Note that `current` will only refer to the final `.checkmark` because you're doing an asynchronous call in each iteration. — Heretic Monkey, May 11 '17 at 20:18
Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Heretic Monkey, May 11 '17 at 20:19

Travis Acton · Answer 1 · 2017-05-11T21:16:04.633

0

Apologies if I am not understanding your question but give this a try:

    if(data.rating.solved_date === null) {
    for (var i = 0; i < current[0].children.length; i++) {
       current[0].children[i].classList.remove("active");
    }
    } else {

    for (var i = 0; i < current[0].children.length; i++) {
        current[0].children[i].classList.add("active");
        }

}

edited May 11 '17 at 21:16

answered May 11 '17 at 19:45

Travis Acton

4,292
2
18
30

May want to debug and see if "current" is actually being populated. Could be the source of all your frustration. – Travis Acton May 11 '17 at 20:20
the `current.data` and `current.refresh` are returning the right results. I guess it is alright – vftw May 11 '17 at 20:23
Just realized how much I take JQuery for granted when working in pure javascript. Amended the for loops in the code given above. Try it now – Travis Acton May 11 '17 at 21:13

score 0 · Answer 2 · answered May 11 '17 at 20:10

Try this - it should find all the elements under current object.

 window.setInterval(function () {
    $('body').find('.checkmark').each(function (index) {
        var current = $(this);
        console.log(current);
        var url = current.data('refresh');
        console.log(url);
        var child = current.children;
        var answerID = current.data('answer');
        console.log(child);
        $.get(url + '?id=' + answerID, function (data) {

            data = JSON.parse(data);

            if (data.rating.solved_date == null)
               current.find('div').removeClass('active')

            else
              current.find('div').addClass('active')


        });
    });
}, 1000);

Add and remove class element children

2 Answers2