JQuery的未過濾DOM改變

我有一個問卷頁面，有些div有data-answered屬性添加到他們這樣的：JQuery的未過濾DOM改變

<div class="question" data-answered="False"> 
    ... rest of the html 
</div>

現在我有幾個在某些時候的那些，並通過js（你可以閱讀JQuery的）我做的：

myDiv.data("answered", "True")

請假設我有辦法讓實際div，這裏不是問題。現在我可以看到，實際data-answered屬性設置爲"True"當我檢查js的當地人，對DOM探險不過說明不了什麼。然而，問題是當我需要回答的問題數是這樣的：

var answeredCount = $('[data-answered=True]').length

那麼無論有多少變化我做了，我總是相同的元素/結果/算作當第一次加載頁面。但是，如果我做以下操作：

var answeredCount = $('[data-answered]') 
     .filter(function() { return $(this).data('answered') == 'True' }) 
     .length

然後我得到我預期的結果。我會用一個實際的瀏覽器的一些數據可以添加圖片作爲證明我剛纔說要支持我的要求：

注：此行爲似乎發生在歌劇院和邊緣，因爲我在Chrome上試用過它，它按我的預期工作，沒有試過Firefox。

這是預期的行爲？
我誤解了JQuery如何使用DOM並且它發生了變化？
只有這兩種瀏覽器才能讓它們變得特別嗎？

來源

2017-01-19 Luiso

要處理data-屬性，你應該把它蒙山的.attr方法。就像這樣：

myDiv.attr("data-answered", "True")

現在，$('[data-answered=True]')應該工作。

這是因爲.data()將數據存儲到內部jQuery位置，並且不會將data-屬性添加到DOM。

要檢索數據，另一方面，.data(key)都會返回分配了.data(key,value)或data-屬性的數據。從該文檔：

返回在對於 jQuery的集合中的第一個元素，如通過設置數據（名稱，值）指定的數據存儲或由HTML5 DATA- * 屬性的值。

來源

2017-01-19 05:49:15 mrlew

隨着原材料的JavaScript，就可以達到預期的結果，通過下面的代碼。也許，你有因爲受到真正的比較，而不是「真」

var ans = Array.from(document.getElementsByClassName("question")).filter(e=> (e.dataset.answered == 'True')).length 
 

 

 
/* 
 
* 
 
* if your browser does not support ES6 syntax 
 
* Array.from(document.getElementsByClassName("question")).filter(function(e){ return e.dataset.answered == 'True' }).length 
 
* 
 
*/ 
 

 
document.getElementById('answered').innerHTML = ans;

<div class="question" data-answered="False"> 
 
    ... rest of the html 
 
    </div> 
 
    <hr> 
 
    <div class="question" data-answered="True"> 
 
    ... rest of the html 
 
    </div> 
 
    <hr> 
 
    <div class="question" data-answered="True"> 
 
    ... rest of the html 
 
    </div> 
 
    <hr> 
 
    <div class="question" data-answered="False"> 
 
    ... rest of the html 
 
    </div> 
 
    <hr> 
 
    <div class="question" data-answered="True"> 
 
    ... rest of the html 
 
    </div> 
 
    <hr> 
 
    <div class="question" data-answered="True"> 
 
    ... rest of the html 
 
    </div> 
 
    <hr> 
 
    <div class="question" data-answered="False"> 
 
    ... rest of the html 
 
    </div> 
 
    <hr> 
 
    <div id="results"> 
 
     <p>Answered: <span id="answered"></span></p> 
 
    </div>

來源

2017-01-19 05:50:14 marmeladze

問題似乎每一件事情順利。

您可以檢查該文件大約jQuery .data()

簡而言之，$(...).data('answered', 'True')不會data-answered="False"改變ATTR到data-answered="True"。 $(...).attr('data-answered', 'True')呢。

來源

2017-01-19 06:17:08

JQuery的未過濾DOM改變

回答

相關問題