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。从容器 div 中，您可以通过.findor找到其他输入.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 回答