-5

I am running a loop, that checks div's for it's content(its a small 4 pieced puzzle, data taken from XML files. Now i have a variable that makes it run trough div #1A to #4A. now i use the same variable to go into the div, and see if there is an image with the same class as parent id has. this is my jquery:

        //Run this when they want to check the answer
        $(document).ready(function() {
            var correctPositions = 0;

            function handleForm(count) {
                //Build div var
                console.log("clickDetected");
                var div = "#"+ count +"A";
                console.log("This is the counter "+count);
                console.log("This is the div im looking into: "+div);

                //Check if div actually has children
                if ($(div).children().length > 0){
                    var childId = $(div + ":first-child").attr("id");
                    //Got HTML to test if there really wasn't anything, returns: undefined
                    var childHTML = $(div + ":first-child").html();
                    console.log(childHTML);
                    if(childId != null){
                        console.log("Child id "+ childId);
                        if(count = childId){
                            correctPositions++;
                            console.log("Correct answers:"+correctPositions);
                        }
                    } else {
                        console.log("child is undefined");
                    }
                }
                console.log("end of IF");
            }

            //Bind click to function
            $("#goed").click(function() {
                //Loops 4 times
                for(count = 1; count < 5; count++) {
                    handleForm(count);
                }                   
            }); 
        });

This is the HTML when all puzzle pieces are on the right place.

                <div id="pieceHolder">
                    <div class="position one ui-droppable" id="1A"><span style="display:none;" id="1">1</span></div>
                    <div class="position two ui-droppable" id="2A"><span style="display:none;" id="2">2</span></div>
                    <div class="position three ui-droppable" id="3A"><span style="display:none;" id="3">3</span></div>
                    <div class="position four ui-droppable" id="4A"><span style="display:none;" id="4">4</span></div>
                </div>

First div is fine, it finds the child span and it's ID. Only, when i get to the second div, it still finds the parent div, but says there is no child, and thus, no puzzle piece to be found. What am i missing?

SliQz
  • 298
  • 1
  • 4
  • 17

1 Answers1

2

It has already been mentioned that you ought not to start an id with a digit. But let say that that number is 4 for example. Then the following line:

var childId = $(div + ":first-child").attr("id");

Would be:

var childId = $("#4A:first-child").attr("id");

This does not refer to the first child of #4A if that is your intention. Already, #4A returns one element; so when you append :first-child the collection returned would be empty because #4A is not it's parent's first-child.

May be you meant to write:

var childId = $(div).children("span:first-child").attr("id");
PeterKA
  • 24,158
  • 5
  • 26
  • 48