Question

我有常见的jQuery函数和两个div标签。两个div标签都有不同的名称，但都包含相同ID的元素现在我想为它们使用这个通用的Jquery函数？我已经实现了常用功能，但它并不适用于两者。

这是我的jsfiddle -jsfiddle.net/xS7zF/1 /

的链接

在我的jsfiddle中有两个div标签，即example1和example2，两个标签都有相同id的元素。功能对于第一个div工作正常，但不适用于第二个。

请帮我解决这个问题。

Answer 1

ID必须是唯一的，您不应重复它们。您可以使用class替换id，并在jQuery函数中执行(".ub").each()或使用eq(x)手动引用该对象。例如(".ub").eq(1).

Answer 2

是的，在引擎盖下，ID上的jQuery选择将使用浏览器实现的Document.GetElementById（）函数，这真的很快，但是（我想取决于浏览器）会在找到第一个元素后停止因为ID应该是唯一的，并且在找到第一个之后不需要进一步搜索。

例如，将id =“eb”的div重命名为class =“eb”，您仍然可以使用$（“＃example1 .eb”）和$（“＃example2 .eb”）来定位特定元素

更新：使用你的新小提琴我创建了这个：http://jsfiddle.net/xS7zF/5/

我清理了很多代码，希望你能看到我做了什么。我改变了从id到class出现两次的所有元素。现在，当您使用$(".classname").click()将事件附加到元素时，它会附加到所有元素。在您设置HTML并执行show() / hide()的处理函数中，您没有使用它的ID来定位特定元素，但是您可以找到它相对于执行该事件的元素。您可以使用parent（），parentsUntil（），next（），find（）等来执行此操作。检查所有可能性的jQuery文档。因此，例如，change-handler附加到name = Assets的所有输入。但是，不是使用$（“＃b1”）。show（），而是使用$（this）.parent（）转到使用$（this）.parent（）触发的特定输入的父级。然后我找到一个带有class =“。b1”的元素，它只能找到这个特定输入旁边的元素，并且我将HTML设置为该元素。

由于存在另一个输入，当THAT输入发生更改时会发生相同的操作，但它会找到IT的父级，并找到IT旁边的class =“。b1”的元素。因此，包含输入的两个div都被包含，因为它们相对于自身而不是文档中的元素起作用。

为了获得额外的乐趣，并向您展示这种编程方式的灵活性，这里有一个Javascript代码不变的小提琴，但完全相同的问题-div复制了8次。无论你重复多少次，相同的代码都会对你创建的div进行操作，因为一切都是相对的。 http://jsfiddle.net/xS7zF/7/

希望这会有所帮助，其余的由您决定！

Answer 3

您不应将相同的ID分配给不同的元素。您 CAN 但不应该。不要给出相同的id，而是使用class

Answer 4

ID必须是唯一的，请尝试修复此问题，更改为类。你可以尝试这样的事情：

$("div div:first-child")

而不是

$("#eb")

但取决于您的页面代码的其余部分。因此，首先更改为类并使用

$(".eb")

Answer 5

当jQuery / javascript找到第一个ID时会忽略其余的ID，请阅读更多相关信息 http://www.w3schools.com/tags/att_global_id.asp

如何对包含相同id的元素的两个div使用常见的js函数？

5 个答案: