jQuery：array [i] .children（）不是函数 [英] jQuery: array[i].children() is not a function
问题描述
以下代码的灵感来自 http://ignorethecode.net/blog/2010 / 04/20 / footnotes / ：当您将光标移到脚注符号上时，脚注会显示为工具提示。
The following code is inspired by http://ignorethecode.net/blog/2010/04/20/footnotes/: when you move the cursor over the footnote symbol, the footnote is shown as a tool-tip.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>footnote demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p>Baryonyx was a theropod dinosaur of the early Cretaceous Period, about 130–125 million years ago<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a>. An identifying specimen of the genus was discovered in 1983 in Surrey, England; fragmentary specimens<a href="#fn2" class="footnoteRef" id="fnref2"><sup>2</sup></a> were later discovered in other parts of the United Kingdom and Iberia. Meaning "heavy claw", Baryonyx refers to the animal's very large claw (31 cm or 12 in) on the first finger. The 1983 specimen<a href="#fn3" class="footnoteRef" id="fnref3"><sup>3</sup></a> is one of the most complete theropod skeletons from the UK, and its discovery attracted media attention.</p>
<div class="footnotes">
<hr>
<ol>
<li id="fn1"><p>Baryonyx caught and held its prey primarily with its strong forelimbs and large claws.<a href="#fnref1">↩</a></p></li>
<li id="fn2"><p>The creature lived near bodies of water, in areas where other theropod, ornithopod, and sauropod dinosaurs have also been found. <a href="#fnref2">↩</a></p></li>
<li id="fn3"><p>It had a long, low, bulbous snout and narrow, many-toothed jaws, which have been compared to gharial jaws.<a href="#fnref3">↩</a></p></li>
</ol>
</div>
<script>
var removeElements = function(text, selector) {
var wrapped = $("<div>" + text + "</div>");
wrapped.find(selector).remove();
return wrapped.html();
}
var $fRef = $(".footnoteRef");
for(var i=0; i<$fRef.length; i++) {
var sup = $fRef.children("sup")[i];
//var sup = $fRef[i].children("sup");
//var sup = $fRef.eq(i).children("sup");
//var sup = $fRef.get(i).children("sup");
//var sup = $($fRef[i]).children("sup");
//debugger;
sup.setAttribute('fnID',i);
sup.onmouseover = function(event) {
var fnTip = document.getElementById('fnTip');
if(fnTip) fnTip.parentNode.removeChild(fnTip);
var pTip = document.createElement('div');
var fnT = document.getElementById($fRef[this.getAttribute('fnID')].getAttribute("href").substring(1)).innerHTML;
pTip.innerHTML = removeElements(fnT,"a");
pTip.id = 'fnTip';
pTip.style.position = 'absolute';
pTip.style.left = (event.pageX - 180) + 'px';
pTip.style.top = (event.pageY + 20) + 'px';
pTip.style.width = '360px';
pTip.style.textIndent = '2em';
pTip.style.textAlign = 'left';
pTip.style.backgroundColor = '#FFFFE0';
pTip.style.border = '1px solid #636363';
pTip.style.padding = '5px';
pTip.style.fontSize = '12px';
pTip.style.lineHeight = '1.8';
pTip.style.borderRadius = '5px';
document.body.appendChild(pTip);
};
sup.onmouseout = function(event) {
var fnTip = document.getElementById('fnTip');
if(fnTip) fnTip.parentNode.removeChild(fnTip);
};
}
</script>
</body>
</html>
我的问题是行 var sup = $ fRef.children（ sup）[i]; 似乎应该是 var sup = $ fRef [i] .children（sup）; ，或者< a href =https://stackoverflow.com/questions/28442138> .children（）不适用于指定的jquery返回索引。但是，这些方式（代码中的行被注释）都不起作用。请解释为什么 var sup = $ fRef.children（sup）[i]; 正在运行，其他人无法正常工作？
My question is that the line var sup = $fRef.children("sup")[i]; seems should be var sup = $fRef[i].children("sup");, or following .children() does not work on specified index of jquery return . However, those ways (lines in the code are commented) are all not working. Please explain why var sup = $fRef.children("sup")[i]; is working, and others are not working?
推荐答案
-
var sup = $ fRef.children（sup）[i];
获取$ fRef的子集合中的第i个元素;
所有其他方法处理$ fRef集合的第i个元素：
var sup = $fRef.children("sup")[i];
takes the ith element in the collection of children of $fRef;
All the other methods deals with the ith element of the $fRef collection:
var sup = $ fRef [i] .children（sup）;
尝试在jQuery集合$ fRef的第i个元素上调用函数children，但该元素是经典的Dom元素，因此它没有任何子元素方法。
var sup = $fRef[i].children("sup");
tries to call the function children on the ith element of the jQuery collection $fRef, but that element is a classic Dom Element so it doesn't have any children method.
var sup = $ fRef.eq（i）.children（sup）;
与2相同但正确因为eq将返回一个jQuery对象。它检索$ rFref的第i个元素的所有子元素
var sup = $fRef.eq(i).children("sup");
does the same thing as 2 but correctly as eq will return a jQuery object. It retrieves all the children of the ith element of $rFref
var sup = $ fRef.get（i）.children（ sup）;
get方法与索引相同：它获取dom对象，因此它也不起作用。
var sup = $fRef.get(i).children("sup");
The get method does the same as the index: it gets the dom object so it won't work either.
var sup = $（$ fRef [i]）。children（sup）;
也将当您在dom元素中重新包装html集合时，工作为3。虽然
var sup = $($fRef[i]).children("sup");
will also work as 3 as you rewrap the html collection in a dom element. It's really unefficient though
这篇关于jQuery：array [i] .children（）不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
