jQuery:array .children()不是函数

以下代码的灵感来自http://ignorethecode.net/blog/2010/04/20/footnotes/ :当您将光标移到脚注符号上时,脚注将显示为工具提示。

    footnote demo    

Baryonyx was a theropod dinosaur of the early Cretaceous Period, about 130–125 million years ago1. An identifying specimen of the genus was discovered in 1983 in Surrey, England; fragmentary specimens2 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 specimen3 is one of the most complete theropod skeletons from the UK, and its discovery attracted media attention.


  1. Baryonyx caught and held its prey primarily with its strong forelimbs and large claws.

  2. The creature lived near bodies of water, in areas where other theropod, ornithopod, and sauropod dinosaurs have also been found.

  3. It had a long, low, bulbous snout and narrow, many-toothed jaws, which have been compared to gharial jaws.

var removeElements = function(text, selector) { var wrapped = $("
" + text + "
"); 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); }; }

我的问题是行var sup = $fRef.children("sup")[i]; 似乎应该是var sup = $fRef[i].children("sup"); 或者.children()不能在指定的jquery返回索引上工作 。 但是,这些方式(代码中的行被注释)都不起作用。 请解释为什么var sup = $fRef.children("sup")[i]; 正在工作,其他人没有工作?

  1. var sup = $fRef.children("sup")[i];
    在$ fRef的子集合中获取第i个元素;
    所有其他方法都处理$ fRef集合的第i个元素:

  2. var sup = $fRef[i].children("sup");
    尝试在jQuery集合$ fRef的第i个元素上调用函数children,但该元素是经典的Dom元素,因此它没有任何子元素方法。

  3. var sup = $fRef.eq(i).children("sup");
    与2相同但正确,因为eq将返回一个jQuery对象。 它检索$ rFref的第i个元素的所有子元素

  4. var sup = $fRef.get(i).children("sup");
    get方法与索引相同:它获取dom对象,因此它也不起作用。

  5. var sup = $($fRef[i]).children("sup");
    当你在dom元素中重新包装html集合时,它也将工作为3。 但这真的很无效