Создавайте динамические div, используя javascript / jquery

Question

Создавайте динамические div, используя javascript / jquery

0

Я хотел бы создать динамические divs с помощью javascript или jquery и не знаю, как быть.

<div id="clickable">
    <button class="start">Default</button>
    <button class="random">Randon</button>
    <button class="gradient">Gradient</button>
    <button class="trail">Trail</button>
    <button class="clear">Clear</button>
    <div id="start">Please click on one of the buttons to get started!</div>
</div>

<div class="wrapper">

</div>

Я хотел бы добавить x * x divs между классом "wrapper". Например, когда кто-то вводит 4, выход будет представлять собой сетку 4x4 div. Заранее спасибо!

В настоящее время у меня это есть, но ничего не происходит.

$(".start").click(function() {
    total = prompt("Please enter a number");
});

$(document).ready(function() {
    $(".start").click(function() {
        function begin(total) {
            for (var i = 0; i < total; i++) {
                var rows = document.createElement("div");
                    for (var i = 1; i < rows; i++) {
                        var columns = document.createElement("div");
                    }
            }
        }
    });    
});

Mukul215 07 май 2014, в 03:56

Источник

0

Покажите, что вы пробовали, но вы можете просто поместить HTML-код в свойство innerHTML
James Black 07 май 2014, в 01:42
0

Кроме того, какова цель наличия сетки? Может быть, таблица будет хорошим выбором для этого в зависимости от типа контента, который вы собираетесь иметь в сетке.
Jaime Garcia 07 май 2014, в 01:44
1

На данный момент в вашем JavaScript каждый раз , когда вы щелкните элемент с классом start вы определяете функцию begin . не работает ничего
Adam Merrifield 07 май 2014, в 01:54
0

К вашему сведению: $("<div>") сделает div, используя jQuery.
Collin Grady 07 май 2014, в 01:55

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

html5

1 ответ

Ещё вопросы

Покажите, что вы пробовали, но вы можете просто поместить HTML-код в свойство innerHTML
Кроме того, какова цель наличия сетки? Может быть, таблица будет хорошим выбором для этого в зависимости от типа контента, который вы собираетесь иметь в сетке.
На данный момент в вашем JavaScript каждый раз , когда вы щелкните элемент с классом start вы определяете функцию begin . не работает ничего
К вашему сведению: $("<div>") сделает div, используя jQuery.

Serendipity · Accepted Answer · 2014-05-07T01-36-00.000Z

Я обновил здесь скрипку, чтобы вы начали.

Способ создания динамических divs состоит в том, чтобы сначала сделать следующее: Получить дескриптор вашего контейнера. В этом случае это будет $(".wrapper")

Я не знаю, как вы хотите, чтобы сетка была выполнена, но я сделал это, рассматривая каждую строку как один div (с "n" строками) и каждую строку, содержащую "n" столбцов div.

Чтобы создать div, вы можете использовать удобную нотацию $('<div>', {...}). И когда вы проходите цикл, не забудьте добавить в контейнер.

Держите презентацию в CSS (вы можете видеть, что это было сделано и в скрипке).

Код был скопирован здесь, чтобы вы могли обратиться к нему.

$(".start").click(function () {
    total = prompt("Please enter a number");
    console.log("Total is", total);
    //Now call the grid creator.
    createGrid(total);
});

function createGrid(total) {
    //Get the wrapper handle.
    var $container = $(".wrapper");

    //Loop through each row.
    for (var rowIndex = 0; rowIndex < total; rowIndex++) {

        //Create the skeleton for the row.
        var rowId = "row-" + rowIndex; //Not needed.
        var $row = $("<div>", {
            "class": "row",
            "id": rowId
        });

        //Loop through each column
        for (var columnIndex = 0; columnIndex < total; columnIndex++) {

            //Create skeleton for the column. (Note: IDs have to be unique)
            var columnId = rowIndex + "-col-" + columnIndex; //Not needed.
            var $column = $("<div>", {
                "class": "column",
                "id": columnId
            });

            //Append to the row div.
            $row.append($column);

        }

        //Finally append this row to the container.
        $container.append($row);
    }
}

Эй, спасибо большое, это очень помогает. У меня сложилось впечатление, что вам всегда нужна функция (document) .ready с jQuery. Это определенно проясняет ситуацию!
Это необходимо, если ваши скрипты появляются перед разметкой. Лучше размещать скрипты после тега body, после чего вам не нужен готовый документ.