jQuery：array [i] .children（）不是函數

以下代碼受http://ignorethecode.net/blog/2010/04/20/footnotes/啓發：當您將光標移到腳註符號上時，腳註將顯示爲工具提示。jQuery：array [i] .children（）不是函數

<!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];正在工作，而其他人不工作？

來源

2016-09-18 Chen Deng-Ta

未註釋的人工作，因爲jQuery'.children（）*方法*將所有匹配的元素的所有孩子收集到一個集合，所以你抓住'我'在那個集合中。因此，只要***每個'footnotRef'只有一個'sup'，它就可以可靠地工作。 – 2016-09-18 13:34:10

您的標題和代碼不匹配... – epascarello

對不起，我對JS知之甚少，您對新標題有什麼建議？如果可能的話，我會編輯標題。 –

var sup = $fRef.children("sup")[i];
花費$ FREF的孩子的集合中的第i個元素;
所有其他方法處理的是$ FREF收集的第i個元素：
var sup = $fRef[i].children("sup");
試圖調用jQuery的收集$ FREF的第i個元素在功能上孩子，但該元素是一個典型的DOM元素所以它沒有任何子方法。
var sup = $fRef.eq(i).children("sup");
做同樣的事情爲2，但作爲正確EQ將返回一個jQuery對象。它檢索$ rFref
var sup = $fRef.get(i).children("sup");
get方法不相同，該指數的第i個元素的所有子：它得到的DOM對象，所以它不會工作的。
var sup = $($fRef[i]).children("sup");
也將作爲3，因爲你重新包裝一個dom元素的html集合。這真的是效率不高

來源

2016-09-18 13:35:48 Axnyff

謝謝，我相應地編輯了我的答案 – Axnyff

jQuery：array [i] .children（）不是函數

回答

相關問題