CODEWITHSUNDEEP
javascriptjquery
JVE999
JVE999

Reputation: 3517

jQuery won't select tag?

jQuery is telling me that it cannot find the tag I'm asking it to select. I have a similar select as well that works fine.

Here's the selecting code:

$(".pageName.ent0#1401183013");

Here's what the tag looks like:

<div class="pageName ent0" id="1401183013">/</div>

When I write console.log($(".pageName.ent0#1401183013").length) it gives me 0. It's on a timer so there are a continuous pile of these tags with the same attributes, but it tells me 0 every time. Those are copy+paste examples from the output.

I tried this in jsFiddle and, as expected, it worked fine, but in the implementation it doesn't.

var inputLog = JSON.parse('<?php echo $jsLog ?>');
var numOfPings = 0;



var inputLogStartInd = -1;
var thisSecond = '<?php echo $startTime ?>';
for(var i = 0; i < inputLog.length; i++){
    if(inputLog[i].time >= thisSecond){
        inputLogStartInd = i;
        thisSecond = inputLog[i].time;
        break;
    }
}
if(inputLogStartInd!=-1){



var bncEnXCoord = '70%';
var bncStXCoord = '70%';
var thisLogInd = inputLogStartInd;
console.log("thisLogInd: "+thisLogInd);
console.log(inputLog[thisLogInd]);
var pagesListed = new Array();
setInterval(function(){
    console.log(inputLog[thisLogInd].time);
    console.log(thisSecond+"\n");
    if(inputLog[thisLogInd].time==thisSecond){
        var entCount = 0;
        while(inputLog[thisLogInd].time==thisSecond){
            $(".phpPongTable #pages").append('<div class="pageName ent'+entCount+'" id="'+thisSecond+'">'+inputLog[thisLogInd].file+'</div>'); // make pagesListed to handle duplicates
            $(".phpPongTable #ips").append('<div class="ipAdd ent'+entCount+'" id="'+thisSecond+'">'+inputLog[thisLogInd].ip+'</div>'); // make ipsListed to handle duplicates
            console.log($('.ipAdd.ent'+entCount+'#'+thisSecond)); // This successfully returns the tag
            var ipAddTop = ($('.ipAdd.ent'+entCount+'#'+thisSecond).offset().top - $(window).scrollTop());
            var ipAddLeft = ($('.ipAdd.ent'+entCount+'#'+thisSecond).offset().left);
            $("body").append(
                '<div class=".circle ent'+entCount+'" id="'+thisSecond+'" \
                style="position:absolute;\
                top:'+ipAddTop+';\
                left:'+ipAddLeft+';">0</div>');
            console.log($('.pageName.ent'+entCount+'#'+thisSecond).length); // This outputs 0 all the time
            /////*Error occurs here (Uncaught TypeError: Cannot read property 'top' of undefined )*/////
            var pageNameTop = ($('.pageName.ent'+entCount+'#'+thisSecond).offset().top - $(window).scrollTop());
            var pageNameLeft = ($('.pageName.ent'+entCount+'#'+thisSecond).offset().left);
            $('.circle.ent'+entCount+'#'+thisSecond).animate({
                'top':pageNameTop,
                'left':pageNameLeft
            },2000,
            function(){
                $(this).animate({
                    'left':ipAddLeft,
                    'top':ipAddTop
                });
            });
            thisLogInd++;
            entCount++;
        }
    }







    thisSecond++;
    console.log("thisNewSecond: "+thisSecond);
},1000);

} else {
    console.log("No log entries");
}

Upvotes: 2

Views: 86

Answers (1)

damoiser
damoiser

Reputation: 6238

The attributes class and ID for a DOM element shouldn't start with a number. Try to put a char before the number and should work.

If you have several class or ID in your app starting with a number, a possible workaround is the follow, as suggested here: http://css-tricks.com/ids-cannot-start-with-a-number/

[id='1800number_box'] {
 /* does work */
}

#1800number_box {
  /* doesn't work */
}

Another possible workaround is the follow:

<body id="69">

body#\36 9 p { color: red; }

Where \36 is the UTF-8 code for the number 6, and it has to be followed by a space (which will be disregarded) so that the engine knows that it’s the end of the code. As described here http://www.markinns.com/articles/full/using_numbers_as_css_class_or_id_values

These examples are for styling CSS only, but the same procedure can be done for selecting a DOM element with jQuery.

Anyway I suggest you to use names that start only with a string (no digits), in this manner is much easier to read your code.

Upvotes: 2

Related Questions