Question

如果页面上有许多相同的对象，是否可以使用Jquery来识别对象的哪个实例被点击

我正在开发一个应用程序，它有很多名为相同的输入框，如果相应的设计[x]和设计[y]不为空，我需要能够验证设计[z]

e.g

<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或第6行

遗憾的是，我无法更改页面上呈现的内容，因此无法添加唯一标识符

由于

Answer 1

我正在开发一个应用程序，它有很多名为相同的输入框，如果相应的设计[x]和设计[y]不为空，我需要能够验证设计[z]

在click处理程序中，this是被点击的元素。然后，您可以使用$(this)将其包装在jQuery对象中，并使用.closest('div')来查找容器div。从容器div中，您可以通过.find或.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

这很重要，因为您的[]属性中包含[]。通过将整个值放在引号中，我们使用rules for strings，因此我们不必担心{{1}}。如果我们没有在它周围加上引号，我们就必须在其中放入一堆不可读的反斜杠，因为如果没有引号，你必须遵循identifiers的规则，这些规则更具限制性。

Answer 2

Just check this out，（点击一项，然后在控制台中查看）

$(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。

如何识别单击哪个相同对象的实例

2 个答案: