【jQuery】要素フィルターのサンプル

■デモ

アイテム１
アイテム２
アイテム３

アイテム１
アイテム２
アイテム３

アイテム１

全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する
奇数と偶数要素にスタイルを設定する。
n番目の要素にスタイルを設定する。
n番目より前/後ろの要素にスタイルを設定する。
テキストの内容で絞り込む。
特定の子要素を持つ要素を絞り込む。
親要素を起点に合致する最初と最後の要素を取り出す。
n個おきに要素にスタイルを設定する。
唯一の子要素にスタイルを設定する。

■HTML

<ul id="list1">
    <li id="item1">アイテム１</li>
    <li id="item2"><a href="#" target="_blank">アイテム２</a></li>
    <li id="item3">アイテム３</li>
</ul>
<ul id="list2">
    <li id="item1">アイテム１</li>
    <li id="item2"><a href="#" target="_blank">アイテム２</a></li>
    <li id="item3">アイテム３</li>
</ul>
<ul id="list3">
    <li id="item1">アイテム１</li>
</ul>
<br>
<input type="button" id="button1" value="CSSを変更1"/> 全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する<br>
<input type="button" id="button2" value="CSSを変更2"/> 奇数と偶数要素にスタイルを設定する。<br>
<input type="button" id="button3" value="CSSを変更3"/> n番目の要素にスタイルを設定する。<br>
<input type="button" id="button4" value="CSSを変更4"/> n番目より前/後ろの要素にスタイルを設定する。<br>
<input type="button" id="button5" value="CSSを変更5"/> テキストの内容で絞り込む。<br>
<input type="button" id="button6" value="CSSを変更6"/> 特定の子要素を持つ要素を絞り込む。<br>
<input type="button" id="button7" value="CSSを変更7"/> 親要素を起点に合致する最初と最後の要素を取り出す。<br>
<input type="button" id="button8" value="CSSを変更8"/> n個おきに要素にスタイルを設定する。<br>
<input type="button" id="button9" value="CSSを変更9"/> 唯一の子要素にスタイルを設定する。<br>
<input type="button" id="button-reset" value="CSSをリセット"/><br>

</ul>

</ul>

</ul>

<br>

<input type="button" id="button1" value="CSSを変更1"/> 全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する<br>

<input type="button" id="button2" value="CSSを変更2"/> 奇数と偶数要素にスタイルを設定する。<br>

<input type="button" id="button3" value="CSSを変更3"/> n番目の要素にスタイルを設定する。<br>

<input type="button" id="button4" value="CSSを変更4"/> n番目より前/後ろの要素にスタイルを設定する。<br>

<input type="button" id="button5" value="CSSを変更5"/> テキストの内容で絞り込む。<br>

<input type="button" id="button6" value="CSSを変更6"/> 特定の子要素を持つ要素を絞り込む。<br>

<input type="button" id="button7" value="CSSを変更7"/> 親要素を起点に合致する最初と最後の要素を取り出す。<br>

<input type="button" id="button8" value="CSSを変更8"/> n個おきに要素にスタイルを設定する。<br>

<input type="button" id="button9" value="CSSを変更9"/> 唯一の子要素にスタイルを設定する。<br>

■JavaScript

jQuery(function($) {

  //全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する
  $('#button1').click(function(e) {
    $('ul[id ^= "list"] li:first').css('background-color', 'blue');
    $('ul[id ^= "list"] li:last').css('background-color', 'red');
  });

  //奇数と偶数要素にスタイルを設定する。
  $('#button2').click(function(e) {
    $('ul[id ^= "list"] li:even').css('background-color', 'yellow');
    $('ul[id ^= "list"] li:odd').css('background-color', 'green');
  });

  //n番目の要素にスタイルを設定する。
  $('#button3').click(function(e) {
    //1番目の要素は0となるので注意
    $('ul[id ^= "list"] li:eq(3)').css('background-color', 'aqua');
  });
  
  //n番目より前/後ろの要素にスタイルを設定する。
  $('#button4').click(function(e) {
    $('ul[id ^= "list"] li:lt(3)').css('background-color', 'aqua');
    $('ul[id ^= "list"] li:gt(3)').css('background-color', 'aqua');
  });

  //テキストの内容で絞り込む。
  $('#button5').click(function(e) {
    $('ul[id ^= "list"] li:contains("アイテム３")').css('border', 'solid 2px aqua');
  });
  
  //特定の子要素を持つ要素を絞り込む。
  $('#button6').click(function(e) {
    $('ul[id ^= "list"] li:has(a)').css('border', 'solid 2px pink');
  });
  
  //親要素を起点に合致する最初と最後の要素を取り出す。
  $('#button7').click(function(e) {
    $('ul[id ^= "list"] li:first-child').css('border', 'solid 2px gray');
    $('ul[id ^= "list"] li:last-child').css('border', 'solid 2px gray');
  });

  //n個おきに要素にスタイルを設定する。
  $('#button8').click(function(e) {
    //1番目の要素が1になるので注意
    $('ul[id ^= "list"] li:nth-child(3n+1)').css('background-color', 'pink');
    $('ul[id ^= "list"] li:nth-child(3n+2)').css('background-color', 'aqua');
    $('ul[id ^= "list"] li:nth-child(3n)').css('background-color', 'lime');
  });
  
  //唯一の子要素にスタイルを設定する。
  $('#button9').click(function(e) {
    //1番目の要素が1になるので注意
    $('ul[id ^= "list"] li:only-child').css('background-color', 'pink');
  });

  //id=list配下すべての要素のstyleをリセット
  $('#button-reset').click(function(e) {
    $('#list1 *').removeAttr('style');
    $('#list2 *').removeAttr('style');
    $('#list3 *').removeAttr('style');
  });
})

jQuery(function($) {

//全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する

$('#button1').click(function(e) {

$('ul[id ^= "list"] li:first').css('background-color', 'blue');

$('ul[id ^= "list"] li:last').css('background-color', 'red');

});

//奇数と偶数要素にスタイルを設定する。

$('#button2').click(function(e) {

$('ul[id ^= "list"] li:even').css('background-color', 'yellow');

$('ul[id ^= "list"] li:odd').css('background-color', 'green');

});

//n番目の要素にスタイルを設定する。

$('#button3').click(function(e) {

//1番目の要素は0となるので注意

$('ul[id ^= "list"] li:eq(3)').css('background-color', 'aqua');

});

//n番目より前/後ろの要素にスタイルを設定する。

$('#button4').click(function(e) {

$('ul[id ^= "list"] li:lt(3)').css('background-color', 'aqua');

$('ul[id ^= "list"] li:gt(3)').css('background-color', 'aqua');

});

//テキストの内容で絞り込む。

$('#button5').click(function(e) {

$('ul[id ^= "list"] li:contains("アイテム３")').css('border', 'solid 2px aqua');

});

//特定の子要素を持つ要素を絞り込む。

$('#button6').click(function(e) {

$('ul[id ^= "list"] li:has(a)').css('border', 'solid 2px pink');

});

//親要素を起点に合致する最初と最後の要素を取り出す。

$('#button7').click(function(e) {

$('ul[id ^= "list"] li:first-child').css('border', 'solid 2px gray');

$('ul[id ^= "list"] li:last-child').css('border', 'solid 2px gray');

});

//n個おきに要素にスタイルを設定する。

$('#button8').click(function(e) {

//1番目の要素が1になるので注意

$('ul[id ^= "list"] li:nth-child(3n+1)').css('background-color', 'pink');

$('ul[id ^= "list"] li:nth-child(3n+2)').css('background-color', 'aqua');

$('ul[id ^= "list"] li:nth-child(3n)').css('background-color', 'lime');

});

//唯一の子要素にスタイルを設定する。

$('#button9').click(function(e) {

//1番目の要素が1になるので注意

$('ul[id ^= "list"] li:only-child').css('background-color', 'pink');

});

//id=list配下すべての要素のstyleをリセット

$('#button-reset').click(function(e) {

$('#list1 *').removeAttr('style');

$('#list2 *').removeAttr('style');

$('#list3 *').removeAttr('style');

});

})

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル