問題
jQueryで特定の条件に当てはまる要素に対して、それぞれ個別に処理を行うには？
解決策
jQueryの「each()」を使用する。
それぞれ個別に処理
jQueryで特定の条件に当てはまる要素に対して、それぞれ個別に処理を行っていきたい場合は「each()」 を使用することで実現することができます。
「each()」は以下の形で記述します。
$('セレクタ').each(function() {
// それぞれの該当要素への処理内容
});「each()」の使用例
DEMOはこちら
- アイテム
- アイテム
- 削除
- アイテム
- アイテム
- アイテム
- 削除
HTML
<ul class="jqeach-list clearfix">
<li>アイテム</li>
<li>アイテム</li>
<li>削除</li>
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
<li>削除</li>
</ul>CSS
.jqeach-list > li{
display: inline-block;
vertical-align: top;
margin-right: 10px;
margin-bottom: 10px;
padding: 10px;
background-color: #fef5f2;
}
.jqeach-list > li.rewrite{
color: #F15A24;
font-weight: bold;
}
javascript
if($('.jqeach-list > li').length){
$('.jqeach-list > li').each(function() {
if( $(this).text().indexOf('削除') != -1 ){
$(this).html('書き換えました。');
$(this).addClass('rewrite');
}
});
}
- 「indexOf(‘削除’) != -1」で「削除」というテキストを内包していないかどうかを判定しています。
- 「html()」でliタグ内のHTML文を上書きさせます。
- 「addClass(‘rewrite’)」でクラス「rewrite」を付与させます。
ポイント!
「each()」の処理内において、対象の要素は「$(this)」で指定することができます。
参考ページ
【each(callback) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/core/each/callback/
【String.prototype.indexOf() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
コメント