Question

这是两个代码块，一个是JavaSript，第二个是jQuery。在每个代码的末尾，我将新属性（ x 和 y ）添加到JavaScript对象 div

但是在第一个使用JavaScript的例子中保存了这些属性，但是jQuery似乎没有像预期的那样工作。

问题：是否有任何向JavaScript DOM对象添加新属性的特定方法？

的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;
    });
}

Answer 1

当您向jquery对象添加属性时，它不会被添加到DOM元素。它只是被添加到对象中，稍后会被对象破坏。您可以使用jquery的数据api将值放在缓存中。

    $(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});

并使用getter检索：

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

Answer 2

要使用jQuery执行相同的操作，您可以使用prop方法：

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

jQuery向JavaScript DOM Object添加新属性

2 个答案: