jQuery добавление новых свойств в JavaScript DOM Object

Question

jQuery добавление новых свойств в JavaScript DOM Object

0

Вот два блока кодов: один с JavaSript, второй - в jQuery. В конце каждого кода я добавление новых свойств (х и у) в DIV объектов JavaScript

Но свойства сохраняются в первом примере с помощью JavaScript, но jQuery, похоже, не работает так, как предполагалось.

Вопрос: Есть ли какой-либо конкретный способ добавления новых свойств в объект DOM JavaScript?

JavaScript

  init = function() {
                var puzzleArea = document.getElementById('puzzlearea');
                var divs = puzzleArea.getElementsByTagName("div");

                // initialize each piece
                for (var i = 0; i < divs.length; i++) {
                    var div = divs[i];

                    // calculate x and y for this piece
                    var x = ((i % 4) * 100);
                    var y = (Math.floor(i / 4) * 100);

                    // set basic style and background
                    div.className = "puzzlepiece";
                    div.style.left = x + 'px';
                    div.style.top = y + 'px';
                    div.style.backgroundImage = 'url("background.jpg")';
                    div.style.backgroundPosition = -x + 'px ' + (-y) + 'px';

                    // store x and y for later
                    div.x = x;
                    div.y = y;
                }
            };

JQuery

init = function() {
    var puzzleArea = $('div#puzzlearea');
    var divs = $('div#puzzlearea div');
    divs.each(function(idx, e) {
        var x = ((idx % 4) * 100);
        var y = (Math.floor(idx / 4) * 100);
        $(this).addClass("puzzlepiece").css({
            "left":x + "px",
            "top":y + "px",
            "background-image":"url('background.jpg')",
            "background-position":-x + "px " + (-y) + "px"});
        $(this).x = x;
        $(this).y = y;
    });
}

sandy 24 сен. 2013, в 03:46

Источник

Теги:

javascript

jquery

2 ответа

Ещё вопросы

PSL · Answer 1 · 2013-09-23T23-42-00.000Z

Когда вы добавляете свойство в объект jquery, он не добавляется к элементу DOM. Он просто добавляется к объекту и позже уничтожается с объектом. Вы можете использовать данные api jquery для размещения значений в кеше.

    $(this).data('x', x); //or do this.x = x;
    $(this).data('y', y); //or do this.y = y

или просто сохранить как

    $(this).data('coords', {"x":x, "y": y});

и извлекать с использованием геттера:

    var coords = $(this).data('coords');

Я попробовал это, но это не дало ожидаемого результата. Метод prop () выглядит хорошо
если div.x = x работает для вас, this.x также должен работать. Также я не уверен, является ли хорошей идеей загрязнять элемент, добавляя к нему свойства, отличные от того, что он имеет. (Я не уверен, но вероятно это может вызвать утечки памяти). Лучший способ - использовать атрибут data-* по моему мнению также является юридически действительным.

Guffa · Answer 2 · 2013-09-23T23-31-00.000Z

Чтобы сделать то же самое, используя jQuery, вы будете использовать метод prop:

$(this).prop('x', x);
$(this).prop('y', y);