Question

我正在用 qunit 测试一个方法，我找到了一些我不理解的东西。

该函数正在检查是否扫描了所有后代，我使用变量来计算出现次数。

test ("all body children highlilighted", function(){
        var body = $('<body><form><label>This is a label</label><input type="text" /></form><input type="text" /></body>') ;
        scan_body(body) ;

        var compteur = 0 ;

        body.find('*').each(function(idx, val){
                var past_color = $(this).css('background-color') ;
                var present_color = $(this).mouseenter().css('background-color') ;
                notEqual(past_color, present_color, "We expected the color of this element to be changed") ;
                compteur++ ;
        }) ;
        equal(compteur, 5, "5 expected !!!!") ;
}) ;

最终断言始终为假， compteur 总是包含2。为什么？

Answer 1

（我假设你正在使用jQuery。）

这是因为body标记由于某种原因而被特别处理：我们得到的回复不是一个body元素，它是{{1}元素，只有表格中的内容（标签和输入）。如果您将form替换为body，您将获得预期的结果，即4（不是5; div只找到后代，所以顶部 - 等级元素不计算在内。）

我很惊讶地发现find被特别对待，但这就是正在发生的事情。

这个版本使用body，其中不相关的位被注释掉，表明我们得到的只是body及其内容（我在输入中添加了form，所以我们可以告诉他们：）

id

Live Copy

结果：

Using body
body[0].tagName: FORM
0: LABEL ([no id])
1: INPUT (first)
compteur = 2

但使用function foo(){ var body = $('<body><form><label>This is a label</label><input id="first" type="text" /></form><input id="second" type="text" /></body>') ; //scan_body(body) ; var compteur = 0 ; console.log("<code>body[0].tagName</code>: " + body[0].tagName); body.find('*').each(function(idx, val){ //var past_color = $(this).css('background-color') ; //var present_color = $(this).mouseenter().css('background-color') ; //notEqual(past_color, present_color, "We expected the color of this element to be changed") ; console.log( idx + ": " + this.tagName + " (" + (this.id || "[no id]") + ")"); compteur++ ; }) ; console.log("compteur = " + compteur); } foo();完全相同的事情会给我们预期的结果（包含所有内容的div） - Live Copy：

Using div
body[0].tagName: DIV
0: FORM ([no id])
1: LABEL ([no id])
2: INPUT (first)
3: INPUT (second)
compteur = 4

Answer 2

您遇到的行为是因为jQuery的$()在用于解析HTML字符串时会在内部使用innerHTML（将您的HTML放入<div>）。它在jQuery documentation中解释：

传递复杂的HTML时，某些浏览器可能无法生成完全复制所提供的HTML源的DOM。如上所述，jQuery使用浏览器的.innerHTML属性来解析传递的HTML并将其插入到当前文档中。在此过程中，某些浏览器会过滤掉某些元素，例如＆lt; html＆gt;，＆lt; title＆gt;或＆lt; head＆gt; elements。因此，插入的元素可能无法代表传递的原始字符串

如果您尝试将innerHTML <body> <div>放入var div = document.createElement('div'); div.innerHTML = '<body><form></form></body>'; // div == <div><form></form></div>，compteur就会删除{{1}}。

{{1}}

如果不是这样，根据@ T.J，您会看到{{1}}等于4。克劳德JSFiddle。

find（）究竟返回了什么？

2 个答案: