在Jquery中使用多个选择器选择一个元素

我对Jquery有点陌生，所以这可能很容易，但我在谷歌上似乎找不到任何东西。这就来了

我基本上有：

<div>
    <div id="row1" class="col1" onMouseOver="OnMouseOver(11)">
         I dont want to select this
    </div>
    <div id="row1" class="col2" onMouseOver="OnMouseOver(12)">
         I want to select this
    </div>
    <div id="row2" class="col1" onMouseOver="OnMouseOver(21)">
         I dont want to select this
    </div>
    <div id="row2" class="col2" onMouseOver="OnMouseOver(22)">
         I dont want to select this
    </div>
</div>

也

我还记得其他几个组合

我认为这个问题是复杂的（或者可能是混淆的：D），因为这些列具有相同的背景图像，这在css中是由

.col1{
    background-image: url(Images/LosCol1.png)
}    
.col2{
    background-image: url(Images/LosCol1.png)
}

---

任何想法？

ID在整个文档中必须是唯一的。然后：

$('#unique-id').css('background-image', 'url(Images/LosCol1Over.png)')

---

ID在整个文档中必须是唯一的。然后：

$('#unique-id').css('background-image', 'url(Images/LosCol1Over.png)')

---

该类应与#id选择器对齐，如下所示：

$('#row1.col2').css('background-image','url(Images/LosCol1Over.png)');

$('.row1.col2').css('background-image','url(Images/LosCol1Over.png)');

但是您确实不应该有多个具有唯一id的元素。也许您应该将这些行指定为附加类，以便：

<div class="row1 col1"...
<div class="row1 col2"...

编辑：

您尝试的代码失败的原因如下：

在第一个示例中，您使用首字母

$（“#row1'）

选择一个

div#row1

，然后尝试使用

.find（'.col1'）

选择正确的一个。这将不起作用，因为

find

查找选定元素的后代，而不是元素本身。通过使用

$（'#row1.col1'）

来代替，您是说您想要具有

.col1

类的

#row1

在第二个示例中，您的参数已反转，并且仍然存在第一个示例的问题。正确的顺序是

$（选择器，范围）

，其中范围是要限制搜索的元素，而不是查看整个文档。您使用了

$（'#row1'，'.col1'）

，它将在任何匹配

.col1

的元素中查找id为

row1

的元素。当然，在

#row1

中查找

.col1

仍然是与第一个示例相同的问题

---

该类应与#id选择器对齐，如下所示：

$('#row1.col2').css('background-image','url(Images/LosCol1Over.png)');

$('.row1.col2').css('background-image','url(Images/LosCol1Over.png)');

但是您确实不应该有多个具有唯一id的元素。也许您应该将这些行指定为附加类，以便：

<div class="row1 col1"...
<div class="row1 col2"...

编辑：

您尝试的代码失败的原因如下：

在第一个示例中，您使用首字母

$（“#row1'）

选择一个

div#row1

，然后尝试使用

.find（'.col1'）

选择正确的一个。这将不起作用，因为

find

查找选定元素的后代，而不是元素本身。通过使用

$（'#row1.col1'）

来代替，您是说您想要具有

.col1

类的

#row1

在第二个示例中，您的参数已反转，并且仍然存在第一个示例的问题。正确的顺序是

$（选择器，范围）

，其中范围是要限制搜索的元素，而不是查看整个文档。您使用了

$（'#row1'，'.col1'）

，它将在任何匹配

.col1

的元素中查找id为

row1

的元素。当然，在

#row1

中查找

.col1

仍然是与第一个示例相同的问题

id=“”对于文档来说应该是唯一的

要使用多个选择器，只需像在css中一样将它们组合起来

 $("#foo.bar").css(....

我建议将onMouseOver=''从html中去掉，并使用jquery将其附加到javascript中

另外，看看您的命名约定，您是基于位置拾取元素的，您可以不将索引附加到具有

 $("#parent div:eq(1)") ....

id=“”对于文档来说应该是唯一的

要使用多个选择器，只需像在css中一样将它们组合起来

 $("#foo.bar").css(....

我建议将onMouseOver=''从html中去掉，并使用jquery将其附加到javascript中

另外，看看您的命名约定，您是基于位置拾取元素的，您可以不将索引附加到具有

 $("#parent div:eq(1)") ....

---

我只是猜测你想在第1列和第2列使用不同的鼠标悬停图像？也许可以试试这样：

$('#row1.col2').css('background-image','url(Images/LosCol1Over.png)');

$('.row1.col2').css('background-image','url(Images/LosCol1Over.png)');

CSS

HTML

---

我只是猜测你想在第1列和第2列使用不同的鼠标悬停图像？也许可以试试这样：

$('#row1.col2').css('background-image','url(Images/LosCol1Over.png)');

$('.row1.col2').css('background-image','url(Images/LosCol1Over.png)');

CSS

HTML

---

ID应该是唯一的。另外，您不应该使用表，而不是模拟带有非语义标记的表吗？ID应该是唯一的。另外，您不应该使用表，而不是模拟带有非语义标记的表吗？虽然这是事实，但它似乎不会使jQuery出错。起初我认为这也是问题所在，但他的代码正在寻找

#row1

和一个带有

.col1

的子元素，这是他的代码无法工作的核心原因。虽然这是事实，但它似乎并没有绊倒jQuery。起初我认为这也是问题所在，但他的代码正在寻找

#row1

和带有

.col1

的子元素，这是他的代码不起作用的核心原因。谢谢dcneiner，这对我来说很有吸引力，尽管我仍然不能100%理解为什么我的一些尝试没有成功。@Thorbjøm我更新了我的答案，解释了为什么你的尝试失败了。如果还不清楚，请告诉我。很高兴它对你有用！谢谢Dcniner，这对我来说很有吸引力，尽管我仍然无法100%地理解为什么我的一些尝试没有成功。@Thorbjøm我更新了我的答案，解释了为什么你的尝试失败了。如果还不清楚，请告诉我。很高兴它对你有用！