2

JQuery でセレクターとインデックスがどのように機能するかを理解するのに苦労しています。クラス属性に基づいて html 要素を操作する関数を書きたいと思っていましたが、一連の要素内の要素の位置を取得するために index() メソッドまたは prevAll().length を使用しようとすると、常に期待どおりの結果が得られるとは限りません。

以下に、クラス .element_list を使用してすべてを処理し、その中でクラス .element_list_item を使用してすべてを処理する jquery コードを示します。A と B の 2 つの .element_list がありますが、.element_list_items のインデックスを通知するだけです。リスト A の場合、予想どおり、インデックスは 0 と 1 として返されます。リスト B では、class 属性のない thead 要素を追加したため、jquery コードで取得すべきではないと考えていますが、2 つの .element_list_items は、期待どおり 0 と 1 ではなく、1 と 2 のインデックスで返されます。 .

何故ですか？私のセレクターはクラス .element_list_item と含まれる .element_list の ID に等しいクラスを持つ要素を探しています。

これを理解する助けがあれば幸いです。

<script language="javascript" type="text/javascript">
$(document).ready(function ()
{
$('.element_list').each(function()
{
    var list_id = $(this).attr('id');
    var first_item_id = $(this).find('.' + list_id + '.element_list_item:eq(0)').attr('id');

    alert('List and first list item:  ' + list_id + ' - ' + first_item_id);        

    $(this).find('.' + list_id + '.element_list_item').each(function()
    {
        var list_item_id = $(this).attr('id');
        var index = $(this).prevAll().length;

        alert('List item and its index:  ' + list_item_id + ' - ' + index);
    });
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" enableviewstate="true">
<br />
<br />
<table class="table_noborder">
    <thead>
        <tr>
            <td>List A</td>
        </tr>
    </thead>
    <tbody id="list_A" class="element_list">
        <tr>
            <td>
                <table>
                    <tbody id="list_A_item0" class="element_list_item list_A">
                        <tr>
                            <td>First Item</td>
                        </tr>
                    </tbody>
                    <tbody id="list_A_item1" class="element_list_item list_A">
                        <tr>
                            <td>Second Item</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <td>List B</td>
        </tr>
    </thead>
    <tbody id="list_B" class="element_list">
        <tr>
            <td>
                <table>
                    <thead>
                        <tr>
                            <td>Header</td>
                        </tr>
                    </thead>
                    <tbody id="list_B_item0" class="element_list_item list_B">
                        <tr>
                            <td>First Item</td>
                        </tr>
                    </tbody>
                    <tbody id="list_B_item1" class="element_list_item list_B">
                        <tr>
                            <td>Second Item</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</form>
</body>
</html>
4

1 に答える 1

2

引数なしで.index（）を使用すると、すべての兄弟と比較したインデックスが取得されます。コレクションと比較してチェックするためにセレクターを渡すことができます

それで

$('#list_B_item0').index() // will return 1 since thead(it's prev sibling) is in index 0

しかし

$('#list_B_item0').index('.element_list_item.list_B') //  returns 0 since it will compare it's index with the collection

他の方法でも行うことができます

$('.element_list_item.list_B').index('#list_B_item0') // returns 0
于 2012-12-20T20:25:43.333 に答える