jQuery( '[attributeFilter1][attributeFilter2][attributeFilterN]' )

投稿日: 2011年10月6日 作成者: alphasis

jQuery API の jQuery( '[attributeFilter1][attributeFilter2][attributeFilterN]' ) は、指定した複数の属性フィルタに全一致するすべての要素を選択する。

記述方法

jQuery( 'セレクター[属性フィルタ１][属性フィルタ２][属性フィルタＮ]' )

セレクターに一致した要素のうち、「属性フィルタ１～Ｎ」に指定した複数の属性フィルタに全一致するすべての要素を選択。

実装例（サンプル）

セル セル セル
セル セル セル
セル セル セル

実装例（サンプル）の動作について

「toggle」ボタンをクリックすると、id属性を持ち、尚且つ、class属性の値が「jquery-api-attribute-class」である、セルの背景色が、ピンク色に変わる。

「toggle」ボタンを再度クリックすると、id属性を持ち、尚且つ、class属性の値が「jquery-api-attribute-class」である、セルの背景色が、黄色に戻る。

実装例（サンプル）のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-toggle' ) . toggle(
        function () {
            jQuery( '#jquery-api-attribute td[id][class=jquery-api-attribute-class]' ) . css( {
                backgroundColor: 'pink',
            } );
        },
        function () {
            jQuery( '#jquery-api-attribute td[id][class=jquery-api-attribute-class]' ) . css( {
                backgroundColor: 'yellow',
            } );
        }
    );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-attribute td {
    background-color: yellow;
}
-->
</style>

HTML

<button id="jquery-api-toggle">toggle</button>
<table id="jquery-api-attribute">
    <tr>
        <td id="jquery-api-attribute-1" class="jquery-api-attribute-class">セル</td>
        <td id="jquery-api-attribute-2">セル</td>
        <td id="jquery-api-attribute-3" class="jquery-api-attribute-class">セル</td>
    </tr>
    <tr>
        <td class="jquery-api-attribute-class">セル</td>
        <td id="jquery-api-attribute-5" class="jquery-api-attribute-class">セル</td>
        <td class="jquery-api-attribute-class">セル</td>
    </tr>
    <tr>
        <td id="jquery-api-attribute-7" class="jquery-api-attribute-class">セル</td>
        <td id="jquery-api-attribute-8">セル</td>
        <td id="jquery-api-attribute-9" class="jquery-api-attribute-class">セル</td>
    </tr>
</table>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, セレクター, 属性 タグ: パーマリンク