【jquery】個人的なメモ：メソッドってこういうつなぎ方があるんだなぁ

【jquery】個人的なメモ：メソッドってこういうつなぎ方があるんだなぁ

jQueryでこういう風に繋げることができるんだなぁって思ったので備忘録

こんな書き方があるんすね

調べ物をしていたらこんな書き方があることを知ったのでメモ

<div>
  <p>東京都渋谷区</p>
  <p>東京都豊島区</p>
  <p>千葉県船橋市</p>
  <p>埼玉県大宮市</p>
</div>

<script>
jQuery('p').filter(function(index,element){
    return element.textContent.startsWith('東京都');
}).replaceWith('<p>23区</p>')
</script>

東京都の文字列が入ってる文を23区に変える記述なんだけどこういう書き方ができるんだーって思ったのとコールバック関数とかstartsWithってなんだ？って思ったりコールバック関数の引数ってどうなってるんだ？って思ったので調べた

まず、jQueryは処理を続けて書くことができる

一つずつわからないところを紐解いてくと、jQueryは処理を続けて書くことができる

jQuery('body').addClass('lock').css({'background': 'red'});

こんな風にclassとcssを一緒に追加できる
今回のもコールバック関数持ちのfilterメソッドがいるけどやってることは同じで処理を続けて書いているだけ

jQuery('p').filter(function(…){…}).replaceWith(…);

コールバック関数の引数

コールバック関数の引数ってそれぞれのメソッドごとに引数が決まってるのかどうか気になって調べたけど明確な回答はわからなかった

要素.filter(function(index,element){
  console.log(index);// インデックス番号
  console.log(element);// 要素
})

って感じで第1引数に要素の番号が入って第2引数には要素自体が入る
引数が一つの時は第1引数の要素の番号が入る

第3引数試しに設定して出力してみたけどundefinedだった

javascriptのプロパティと関数

textContentは要素内のテキスト要素を抜き出すプロパティ
要素内に<br>みたいな改行コードがあっても無視して出力
<br>を文字列として抜き出したいときはinnerHTMLの方を使う

startsWith()はjavascriptのメソッド
要素が引数で渡された文字列で始まるならtrueを返して、始まらないならfalse返す

replaceWith()もjavascriptのメソッドかな？って思ったらこっちはjQueryのメソッドみたいね、ややこしいわ…
要素を丸っと入れ替える事ができるメソッド

おまけ：色々わかったので確認

個人的に理解できてるのか確認がてら書き出し
元々、filter()で要素を絞ってeach()使って要素に属性とか追加してるコードを見て調べ始めたのでちょっと試しのコード

<div>
  <p>東京都渋谷区</p>
  <p>東京都豊島区</p>
  <p>千葉県船橋市</p>
  <p>埼玉県大宮市</p>
</div>

<script>
jQuery('p').filter(function(index,element){
    return element.textContent.startsWith('東京都');
})
.each(function() {
    $(this).replaceWith('<p>23区</p>');
    $(this).css({'background': 'red'});// ×動かない
    $(this).attr('id', 'test');// ×動かない
});
</script>

基本的なコードはそのままで、eachメソッドでcssとか属性の追加を試してみた
結果はコメントアウトに書いてある通り追加のcssとid属性の追加は動かなかった

$(this).replaceWith(‘

23区

‘)

を消せばそれ以降のコードは反映されるんだけど、動的に追加した要素ってcssとかidみたいな属性ってうまく適用されなかった気がするんだよね
それが影響してんかな？

replaceWith()が既存の要素削除して差し替えるメソッドだし、動的に追加してるから上手く動かなかったってことで一旦終わろうと思う
まぁ、コードごと差し替えられるからそっちに属性としてstyleとかid追加すればいいんで原因の追究は後かな