aタグの文字列が取得できません

Question

やりたいこと

cccccという文字列が何番目にあるか取得したい

<div id="Tab_container">
  <ul>
    <li><a href="#">aaaaa</a></li>
    <li><a href="#">bbbbb</a></li>
    <li><a href="#">ccccc</a></li>
    <li><a href="#">ddddd</a></li>
  </ul>
</div>

(function(){
var $tabnames = $('#Tab_container ul li');
var $tabnamesNum = $('#Tab_container ul li').length;
for(let i=0;i<$tabnamesNum;i++){
	if ($tabnames[i].indexOf('ccccc') !== -1) {
		console.log(i)
	} 
}
})();

エラーの内容

$tabnames[i].indexOf is not a function ...
indexOfという命令が使用できないようです。
他にもtext()などで取得しようとしましたが取得できず詰んでいます。
どうすればよいでしょうか？

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const keyword='ccccc';
  const num=[...document.querySelectorAll('#Tab_container a')].map(x=>x.textContent).indexOf(keyword);
  console.log(num); // 2 →hitしなければ-1になる
});
</script>
<div id="Tab_container">
  <ul>
    <li><a href="#">aaaaa</a></li>
    <li><a href="#">bbbbb</a></li>
    <li><a href="#">ccccc</a></li>
    <li><a href="#">ddddd</a></li>
  </ul>
</div>

Answer 2

質問文のコードだと、$tabnames[i] には文字列ではなくDOM要素が入っています。$tabnames[i].textContent.indexOf('ccccc') などで中のテキストを得てからindexOf() をかけるとよいでしょう。

Comments

[barao]

$tabnames[i].textContent.indexOf('ccccc')
↑こちらを条件文に入れたら認識されました！ありがとうございます。

$tabnames[i].text().indexOf('ccccc')
↑こちらではエラーになってしまうのは何が原因なのでしょうか？
お答えいただけますと幸いです

Answer 3

$tabnames[i]が参照しているのは要素そのもののはずなので、$tabnames[i].text()のように「その要素の何」を指定する必要があると思います。

Comments

[barao]

ご回答ありがとうございます。
試しに
let text = $tabnames[i].text();
でテキストのみを取得しようとしましたが下記のエラーが出てしまいました。
$tabnames[i].text is not a function ...

[m.ts10806]

でしたらjQuery要素として扱えば大丈夫なはず
$($tabnames[i]).text()

※ただ、もうちょっと調べてほしい。エラーで分かることは多いです

[barao]

ありがとうございます！
jQuery要素として扱う必要があったということですね。助かりました！

[m.ts10806]

https://api.jquery.com/category/selectors/
返却値が「elements」だからですね。