以下代码的灵感来自 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 集合的第 i 个元素:var sup = $fRef[i].children("sup");
尝试在 jQuery 集合 $fRef 的第 i 个元素上调用函数 children，但该元素是经典的 Dom 元素，因此它没有任何子方法。var sup = $fRef.eq(i).children("sup");
与 2 做同样的事情，但正确的是 eq 将返回一个 jQuery 对象。它检索 $rFref 的第 i 个元素的所有子元素var sup = $fRef.get(i).children("sup");
get 方法与索引的作用相同:它获取 dom 对象，因此它也不起作用。var sup = $($fRef[i]).children("sup");
当您在 dom 元素中重新包装 html 集合时，也将作为 3 工作。不过效率真的很低
关于javascript - jQuery: array[i].children() 不是一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39558138/