2

ページに同一のオブジェクトが多数ある場合、クリックされたオブジェクトのインスタンスを特定するために Jquery を使用することは可能ですか?

同じ名前の入力ボックスが多数あるアプリケーションで作業しています。対応する design[x] と design[y] が空でない場合、design[z] を検証できる必要があります。

例えば

<div><input name="design[x][]" type="text"><input name="design[y][]" type="text"><input name="design[z][]" type="text"></div>
<div><input name="design[x][]" type="text"><input name="design[y][]" type="text"><input name="design[z][]" type="text"></div>
<div><input name="design[x][]" type="text"><input name="design[y][]" type="text"><input name="design[z][]" type="text"></div>
<div><input name="design[x][]" type="text"><input name="design[y][]" type="text"><input name="design[z][]" type="text"></div>
<div><input name="design[x][]" type="text"><input name="design[y][]" type="text"><input name="design[z][]" type="text"></div>
<div><input name="design[x][]" type="text"><input name="design[y][]" type="text"><input name="design[z][]" type="text"></div>

3 行目の x と y が空でない場合 3 行目の z を検証する 5 行目の x と y が空でない場合 5 行目の z を検証しますが、1 2 または 6 行目は検証しません

残念ながら、ページにレンダリングされているものを変更できないため、一意の識別子を追加できません

ありがとう

4

2 に答える 2

5

同じ名前の入力ボックスが多数あるアプリケーションで作業しています。対応する design[x] と design[y] が空でない場合、design[z] を検証できる必要があります。

clickハンドラ内で、thisクリックされた要素です。次に、$(this)それを jQuery オブジェクトでラップし.closest('div')、コンテナー div を見つけるために使用できます。.findコンテナー div から、またはを介して他の入力を見つけることができます.children(この場合、それらは div の直接の子であるため)。

例えば：

$('input[name="design[x][]"]').click(function() {
    // Get the design[x][] element that was clicked
    var $x = $(this);

    // Get its parent div
    var div = $x.closest('div');

    // Get the corresponding design[y][] and design[z][]
    var $y = div.find('input[name="design[y][]"]');
    var $z = div.find('input[name="design[z][]"]');

    // ...do your work...
});

inputどちらに夢中になっているかに関係なく、同じclickことが機能します。それらを見つける方法を調整するだけです.

にフックclickしている場合はdiv、次のようになります。

$('selector for the div').click(function() {
    // The div
    var div = $(this);

    // Get the corresponding design[x][], design[y][], and design[z][]
    var $x = div.find('input[name="design[x][]"]');
    var $y = div.find('input[name="design[y][]"]');
    var $z = div.find('input[name="design[z][]"]');

    // ...do your work...
});

上記では、name属性の値がセレクター文字列内で引用符で囲まれていることに注意してください。

// These delimit the string --+
//                            |
//                +-----------+-------------+
//                |                         |
//                v                         v
var $y = div.find('input[name="design[y][]"]');
//                            ^           ^
//                            |-----+-----|
//                                  |
// These delimit the attr value ----+

エンジンに渡す実際のセレクターは次のとおりです。

input[name="design[y][]"]

name属性が含まれているため、これは重要[]です。値全体を引用符で囲むことにより、文字列のルールを使用しているため、. について心配する必要はありません[]。引用符で囲わなかった場合は、読み取り不能なバックスラッシュをそこに配置する必要があります。引用符がないと、はるかに制限的なidentifiersのルールに従わなければならないからです。

于 2013-07-13T09:07:08.880 に答える
0

これをチェックしてください（アイテムをクリックしてコンソールを見てください）

$(function(){
    $("div input[type='text']").on('click', function(e){
       var item = $(this).attr('name');
       var ind = $(this).closest('div').index();
       var col = item.substr('design['.length, 1);
       var txtInd = { x:1, y:2, z:3 };

       console.log('Line : ' + (ind+1)); // 1-6 (row)
       console.log('Textbox : ' + txtInd[col]); // 1-3 (column)
       // Now do your logic
    });
});

$(this)jQueryクリックされた項目をオブジェクトとして指します。この場合、clickハンドラは に登録されてtext boxesいるため、$(this)クリックされたポイントになりますtext-box。

于 2013-07-13T09:11:07.593 に答える