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

Question

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

我正在开发一个应用程序，该应用程序有很多名称相同的输入框，如果相应的设计[x]和设计[y]不为空，我需要能够验证设计[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 行

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

谢谢

Answer 1

I am working on an application which has a lot of input boxes named the same and I need to be able to validate design[z] if the corresponding design[x] and design[y] are not empty

在您的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...
});

无论您连接点击哪个输入，效果都是一样的，您只需调整查找它们的方式即可。

如果您在 div 上 Hook click，则:

$('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所以我们不必担心[]。如果我们没有在它周围加上引号，我们就必须在其中放置一堆不可读的反斜杠，因为如果没有引号，您必须遵循 identifiers 的规则。 ，限制性更大。