jQuery爲JavaScript添加新屬性DOM對象

這裏有兩段代碼，一段用JavaSript，另一段用jQuery。在每個代碼我添加新的特性（X和ÿ）與JavaScript對象DIV結束jQuery爲JavaScript添加新屬性DOM對象

但屬性被保存在使用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; 
    }); 
}

來源

2013-09-24 sandy

當您添加屬性，它不會加入到DOM元素的jQuery對象。它只是被添加到對象，並隨後被對象破壞。您可以使用jquery的data 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});

，並使用吸氣檢索：

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

來源

2013-09-24 01:46:38 PSL

我試過這個，但沒給預期的結果。 prop（）方法看起來不錯 – sandy

如果'div.x = x'適合你，那麼'this.x'也應該可以工作。此外，我不確定是否通過向其添加屬性而不是其內容來污染元素是一個好主意。（我不確定，但可能會導致內存泄漏）。最好的方法是根據我使用'data- *'屬性，這也是合法有效的。 – PSL

要做到使用jQuery同樣的事情，你可以使用prop方法：

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

來源

2013-09-24 01:52:15 Guffa

jQuery爲JavaScript添加新屬性DOM對象

回答

相關問題