jQuery的自定義數據屬性不是div標籤內的工作

我使用這個div代碼jQuery的自定義數據屬性不是div標籤內的工作

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

，並試圖打印像

japp.init = function() { 
    console.log($("div").data("role")); 
    console.log($("div").data("lastValue")); 
    console.log($("div").data("hidden")); 
    console.log($("div").data("options").name); 
});

這工作正常的值，如果我直接把上面的div標籤裏面的身體，但因爲我把div標籤內的任何其他div標籤它不起作用，並說未定義。

<div class="page"> 
    <div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div> 
    </div>

控制檯打印undefined爲上面的html。

請讓我知道如果有什麼不明確

來源

2013-07-17 user965884

順便說一句，有一個空間在你第二html，在'data- options ='{「name」：「John」}''。我不知道它是否對代碼有任何影響，但你可以檢查它;） –

當獲取數據的jQuery從匹配選擇的第一個元素返回數據，如果在DOM第一個div沒有數據 - jQuery將不會返回它。

嘗試

japp.init = function() { 
    console.log($("div[data-role]").data("role")); 
    console.log($("div[data-lastValue]").data("lastValue")); 
    console.log($("div[data-hidden]").data("hidden")); 
    console.log($("div[data-options]").data("options").name); 
});

或更好的給這個div一個ID，並通過類似的$ id（ '＃someid'）中進行選擇。數據（ '角色'）

來源

2013-07-17 14:02:30

謝謝Artek，你的解決方案完全符合我的要求。我會在5分鐘內接受答案 – user965884

@ user965884，只知道如果你這樣做並且有其他具有相同數據屬性的元素，你會從第一個實例中得到值。 – smerny

是的，如果處理多個div與這些自定義attrs使用$ .each（）函數，由@Kamil T –

嘗試

$("div.page div").each(function(){ 
    console.log($(this).data("whatever_you_need")); 
});

等

這樣，您將通過嵌套在類「頁面」的div的所有div循環。

來源

2013-07-17 14:00:28

你的選擇是div，當你在你的頁面上有更多divs jQuery將選擇（在這種情況下）第一個。

<div class="page"> 
    <div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div> 
</div>

在上面HTML第一個div沒有data-*所以它會導致一個未定義值

你必須要更具體與您的選擇

$('.page div').data('role')

或者

$('div:first div').data('role')

來源

2013-07-17 14:02:32 Spokey

你是不是其中的div正好指定給GE噸。每當你試圖從一個特定的元素獲取特定的數據，你應該確定你正在訪問哪個div。這可以發生在元素的迭代中，也可以通過ID或與ID相關的元素來進行。它不應該基於標記名甚至類名來完成，因爲它們可以是多個。在這種情況下，爲什麼不上格添加一個ID，你正在試圖讓這樣你就可以專門訪問：

<div class="page"> 
    <div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div> 
</div>

然後訪問：

console.log($("#thisDiv").data("role"));

而且，它是壞的性能包同樣的jQuery對象一遍又一遍，你可以緩存它是這樣的：

$thisDiv = $("#thisDiv"); 
console.log($thisDiv.data("role")); 
....

來源

2013-07-17 14:03:03 smerny

給你的事業部一類像類=「MyClass的」

<div class="page"> 
    <div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div> 
    </div>

，然後你可以改變你的jQuery選擇：

japp.init = function() { 
    console.log($(".myClass").data("role")); 
    console.log($(".myClass").data("lastValue")); 
    console.log($(".myClass").data("hidden")); 
    console.log($(".myClass").data("options").name); 
});

否則jQuery的不知道哪個div的您正在尋找。我希望這會幫助

來源

2013-07-17 14:05:16 LittleHoopoe

我相信這是因爲$（「div」）返回div的所有出現，然後選擇第一個執行功能。我不知道你想怎麼使用這個功能，但它可能是值得考慮的是這樣的 JSFiddle其中一類是用來選擇正確的div

$(function(){ 
    console.log($(".div").data("role")); 
    console.log($(".div").data("lastValue")); 
    console.log($(".div").data("hidden")); 
    console.log($(".div").data("options").name); 
    });

來源

2013-07-17 14:05:16 SCraft

jQuery的自定義數據屬性不是div標籤內的工作

回答

相關問題