在Jquery中选择一个具有多个选择器的元素

对于Jquery来说，我有点新，所以这可能很容易，然后我再也找不到Google上的任何东西。所以在这里。在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>

，我想只选择一个div来更改CSS背景图像，但我不能让它的工作（例如＃ROW1 .col2）。因为它是我有一个开关/大小写块，选择哪个div来选择。

我已经尝试过这种选择的不同variaties：

$('#row1').find(".col1").css('background-image', 'url(Images/LosCol1Over.png)')

也

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

和其他几个组合式我还记得

我认为问题是复杂的（或可能混淆： D）由于列具有相同的背景图像，并且这在css中设置为

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

任何想法？

来源

2009-11-17 Thorbjørn Reimann-Andersen

ID应该是唯一的。另外，你是不是应该使用表格，而不是模仿非语义标记的表格？ – James 2009-11-17 15:16:46

类应该嫌靠在#ID选择这样的：

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

但你真的不应该永远有一个唯一的ID不止一个元素。也许你应该指定行作为附加类，所以：

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

然后，您可以选择它是这样的：

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

编辑：

的原因，你试过失败的码是这些原因：

在你的第一个例子中，你选择一个div#row1与您的初始$('#row1')，然后尝试使用.find('.col1')来选择正确的。这不起作用，因为find通过所选元素的后代查看，而不是元素本身。通过使用$('#row1.col1')来代替，你说你想要#row1具有.col1类。
在第二个示例中，您的参数已反转和仍然存在第一个示例的问题。正确的顺序是$(selector, scope)其中scope是您想要限制搜索的元素，而不是查看整个文档。您使用的是$('#row1', '.col1')，它将查找中与id为row1的任何元素匹配的任何元素.col1。当然，寻找.col1里面的#row1仍然是你的第一个例子相同的问题。

来源

2009-11-17 15:22:15

谢谢dcneiner，这对我来说就像是一种魅力，尽管我仍然没有100％的理解为什么我的某些尝试没有成功。 – 2009-11-18 09:48:22

@Thorbjøm我更新了我的答案，解释了为什么你尝试失败。如果还不清楚，请告诉我。很高兴它对你有效！ – 2009-11-18 14:44:04

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

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

来源

2009-11-17 15:22:13

虽然这是事实，但它似乎并没有将jQuery发送出去。起初我认为这也是问题，但他的代码正在寻找'＃row1'和一个带有'.col1'的子元素，这是他的代码无法工作的核心原因。 – 2009-11-17 15:24:13

的ID =“”应该是唯一的文件，

使用多个选择你刚刚将它们结合起来，你会在CSS

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

，我会建议采取的onMouseOver = ''出来你的HTML并将其附加在javascript与jquery

也看着你的命名约定你有挑选基于位置的元素，你可以做wthat而不附加索引类

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

来源

2009-11-17 15:25:39

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

CSS

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

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

HTML

<div> 
<div class="col1"> 
    I dont want to select this 
</div> 
<div class="col2"> 
    I want to select this 
</div> 
<div class="col1"> 
    I dont want to select this 
</div> 
<div class="col2"> 
    I dont want to select this 
</div> 
</div>

脚本

$(document).ready(function(){ 
addMo('col1'); 
addMo('col2'); 
}) 
function addMo(cName){ 
$('.' + cName).hover(function(){ 
    $(this).removeClass(cName).addClass(cName + 'Mo'); 
    }, function(){ 
    $(this).removeClass(cName + 'Mo').addClass(cName); 
}) 
}

来源

2009-11-17 16:03:01 Mottie

在Jquery中选择一个具有多个选择器的元素

回答

相关问题