CODEWITHSUNDEEP
jqueryappendto
Eran Yomtovyan
Eran Yomtovyan

Reputation: 11

Why this not working?

I'm tring to create with jquery 5x3 squares. This is my code:

css:

#SmallNailArea
{
    position:relative;
    height:85%;
    width:100%;
}

.SmallNailLine
{
    background-color:blue;
    position:relative;
    width:100%;
    height:15%;
    clear:both;
}

.SmallNail
{
    background-color:black;
    position:relative;
    height:100%;
    width:10%;
    margin:4%
}

jquery:

$(document).ready(function()
{

var length = 15;
var lineCounter = 0;
var dh = $(".SmallNail").height();
$(".SmallNail").css('width', dh + 'px');

for (var i=1;i<=length;i++)
{
    if ((i-1)%3==0)
    {
        lineCounter++;
        $("<div></div>").attr('class','SmallNailLine').appendTo("$(#SmallNailArea"));
    }
    $("<div></div>").attr('class','SmallNail').appendTo("$(#SmallNailLine").eq(lineCounter));
}

});

It seems that the jquery dosen't working at all.

When I put alert inside the for it does alerting the right values but nothing else happened. 

for (var i=1;i<=length;i++)
{
    if ((i-1)%3==0)
    {
        alert(lineCounter);
        lineCounter++;
        $("<div></div>").attr('class','SmallNailLine').appendTo("$(#SmallNailArea"));
    }
    alert(i);
    $("<div></div>").attr('class','SmallNail').appendTo("$(#SmallNailLine").eq(lineCounter));
}

Thanks!

Upvotes: 1

Views: 58

Answers (3)

Shaddow
Shaddow

Reputation: 3215

Your question is not clear and you didnt created any live example, but ...

I created jsFiddle example

JS:

$(document).ready(function () {
    var length = 15;

    for (var i = 0; i < length; i++) {
        var $SmallNailLine;
        if (i % 3 == 0) {
            $SmallNailLine = $('<div class="SmallNailLine" />');
            $SmallNailLine.appendTo("#SmallNailArea");
        }
        $('<div class="SmallNail" />').appendTo($SmallNailLine);
    }
});

Also you have to add float: left; in .SmallNail.

Upvotes: 1

DontVoteMeDown
DontVoteMeDown

Reputation: 21475

First of all, I think this logic can be better. Look this fiddle. I don't know if that shows the result as you expected.

In jQuery you can create an element and get it after that this way:

var newEl = $('<div></div>');

Once you got it on newEl it's easier to manipulate it. So I've created the var tmp to keep the new element to append another element on it in sequence. 

if ((i-1)%3==0)
{
    tmp = $("<div></div>").addClass('SmallNailLine');
    $("#SmallNailArea").append(tmp);
}
tmp.append($("<div></div>").addClass('SmallNail'));

I also moved this code ...

var dh = $(".SmallNail").height();
$(".SmallNail").css('width', dh + 'px');

...to the end cause the object .SmallNail isn't created on the beggining, where you've been calling it.

Another trick is set the #SmallNailArea with the height in pixels height:100px; because of this.

At last, but not less important, the error that @tymeJV showed, that is crucial for the code to work.

I hope it helps.

Upvotes: 1

tymeJV
tymeJV

Reputation: 104795

This snippet syntax is wrong:

appendTo("$(#SmallNailArea"));

It should be:

appendTo($("#SmallNailArea"));

Upvotes: 4

Related Questions