以下代码受http://ignorethecode.net/blog/2010/04/20/footnotes/的启发：将光标移到脚注符号上时，脚注显示为工具提示。
<!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");或在.children() does not work on specified index of jquery return之后。但是，所有这些方式（代码中的行均已注释）均无效。请说明var sup = $fRef.children("sup")[i];为什么起作用，而其他人却不起作用？ 最佳答案
var sup = $fRef.children("sup")[i];
在$ fRef的子代集合中采用第i个元素；
所有其他方法都处理$ fRef集合的ith元素：var sup = $fRef[i].children("sup");
尝试在jQuery集合$ fRef的第ith个元素上调用子函数，但是该元素是经典的Dom元素，因此它没有任何子方法。var sup = $fRef.eq(i).children("sup");
做与2相同的事情，但是正确地等效于eq将返回一个jQuery对象。它检索$ rFref的ith元素的所有子元素var sup = $fRef.get(i).children("sup");
get方法的作用与索引相同：它获取dom对象，因此也不起作用。var sup = $($fRef[i]).children("sup");
当您将html集合重新包装在dom元素中时，也将以3的形式工作。虽然这真的没有效率
关于javascript - jQuery:array [i] .children()不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39558138/