JSON - If Statement Troubleshooting

Question

What is causing the if statement (totalViews === 0) to not function properly?

The statement should be displaying a span tag with in the "div.viewed" class. The span's inner text should read "0 people have viewed your post" if the "totalViews" equals 0 (no span tags to begin with). However, a span tag is not being inputted at all in to the "div.viewed" class.

The remaining if statements seem to be functioning properly.

A sample of the current code:

function checkViewers() {
    $('div.viewed').each(function() {
        //Base Variables
        var viewer = $('span.user', this);
        var totalViews = viewer.length;
        var shortenViews = viewer.length -1;
        var viewerCount = $('span', this);

        if (totalViews === 0) {
            $('div.viewed', this).append('<span> 0 people have viewed your post.</span>');
        }
        if (totalViews == 1) {
            $('<span> has viewed your post.</span>').insertAfter(viewer.last());
        }
        if (totalViews == 2) {
            $('<span> and </span>').insertAfter(viewer.first());
            $('<span> have viewed your post.</span>').insertAfter(viewer.last());
        }
        if (totalViews >= 3) {
            $('<span> and </span>').insertAfter(viewer.first());
            $('<span class="user count"></span>').insertAfter(viewerCount.eq(1));
            $('.count', this).html(shortenViews + ' more people');
            $('<span> have viewed your post.</span>').insertAfter(viewer.last());
            viewer.slice(1).hide();
        }

    });
}

View the current and complete Plunker.

Your loop is $('div.viewed').each(function() {...}); inside which you expect $('div.viewed', this).append(...); to insert something and so it would if the DOM were so constructed but $(this).append(...); would seem more appropriate. — Roamer-1888
– Roamer-1888, Commented Jan 6, 2015 at 3:23

charlietfl · Accepted Answer · 2015-01-06 03:28:32Z

1

Your problem is in your traversal. $('div.viewed', this) doesn't exist.

Using the context argument of $(selector,context) is the same as writing:

$(this).find('div.viewed'); //look for descendant of "this"

Change:

$('div.viewed').each(function() {    
    /* "this" is an instance of div class= viewed*/

     /* look for a div WITHIN "this" with class=viewed"  --BUT  no such descendant*/
    $('div.viewed', this).append(..;    
});

TO

$('div.viewed').each(function() { 
    /* I'm already here as "this" */   
    $(this).append(..;
});

DEMO

edited Jan 6, 2015 at 3:28

answered Jan 6, 2015 at 3:23

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Bhargav Krishna · Accepted Answer · 2015-01-06 03:20:08Z

0

$('div.viewed', this).append('<span> 0 people have viewed your post.</span>');

here $('div.viewed', this) will return an empty array,

instead you might have to do it like

$('div.viewed').append('<span> 0 people have viewed your post.</span>');

answered Jan 6, 2015 at 3:20

Bhargav Krishna

2271 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

JSON - If Statement Troubleshooting

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related