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[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];が機能している理由と他の機能が動作していない理由を説明してください。

出典

2016-09-18 Chen Deng-Ta

コメントのない1が動作するものの、それは本当にunefficientだからjQueryの '.children（）' *方法*あなたが 'i'をつかんだので、単一のコレクションに一致するすべての要素のすべての子を収集しますそのコレクションにしたがって、確実に確実に動作します。*** footnotRefごとに1つの 'sup 'があります。 –

あなたのタイトルとコードが一致しません... – 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オブジェクトを取得します。
は、DOM要素のhtmlコレクションを再ラップすると3として機能します。

出典

2016-09-18 13:35:48 Axnyff

ありがとう、私はそれに応じて私の答えを編集 – Axnyff

jQuery：array [i] .children（）は関数ではありません

答えて

関連する問題