CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortableaddclass
nikgaru
nikgaru

Reputation: 15

addClass() jquery problems

$(document).ready(function () {
    var counter = 1;
    var asd = '<div class="class-to-div1">' + '<div class="class-to-div  col-md-2 list">' + '<div class="add-list-item static">' + '<button id="add-div">press here to add div</button>' + '</div>' + '<div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + '<div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + '<div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + ' <div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + '</div>' + '</div>';
    //console.log(asd);
    $('.add-list').click(function () {
        $('.container').append(asd);
        $('class-to-div1').each(function (counter) {
            $(this).addClass('sortable-div-' + counter);
        });
        $('class-to-div').each(function (counter) {
            $(this).addClass('sortable-list-' + counter);
        });
        $('.sortable-div-' + counter).sortable({
            connectWith: '.sortable-div-' + counter,
        });
        $('.sortable-list-' + counter).sortable({
            connectWith: '.sortable-list' + counter - 1,
            fixed: '.static',
            placeholder: "ui-state-highlight"
        });
        $("#sortable").disableSelection();
        $("#add-div" + counter).click(function () {
            var text = prompt("what should be inserted?");
            if (text === null) {
                alert("write something in new div");
            } else {
                $(".sortable-list-" + counter).append('<div class="list-item  placeholder">' + text + '</div>');
            }
        });
        counter++;
    });
});

So this is my code in which i create new divs by pressing button. i wanted to drag them around like its on www.trello.com, but they are not moving. i think that addClass() is not the function i want so what should i do? button works fine, but the least code doesnt

Upvotes: 1

Views: 176

Answers (1)

Satpal
Satpal

Reputation: 133403

Your selector is incorrect, prefix with ., if you are using Class Selector (“.class”)

 $('.class-to-div1')

instead of 

 $('class-to-div1')

You have same issue with $('class-to-div')

i think that addClass() is not the function, Definitely addClass() is a function

EDIT

Also you need to modify you .each(), callback function provide you index as you where passing counter basically it was index

Change it to, remove counter parameter from .each()

    $('.class-to-div1').each(function() {
        $(this).addClass('sortable-div-' + counter);
    });

Upvotes: 3

Related Questions