在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)
}
任何想法?
类应该嫌靠在#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
仍然是你的第一个例子相同的问题。
谢谢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)')
虽然这是事实,但它似乎并没有将jQuery发送出去。起初我认为这也是问题,但他的代码正在寻找'#row1'和一个带有'.col1'的子元素,这是他的代码无法工作的核心原因。 – 2009-11-17 15:24:13
的ID =“”应该是唯一的文件,
使用多个选择你刚刚将它们结合起来,你会在CSS
$("#foo.bar").css(....
,我会建议采取的onMouseOver = ''出来你的HTML并将其附加在javascript与jquery
也看着你的命名约定你有挑选基于位置的元素,你可以做wthat而不附加索引类
$("#parent div:eq(1)") ....
我只是猜测你想为第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);
})
}
ID应该是唯一的。另外,你是不是应该使用表格,而不是模仿非语义标记的表格? – James 2009-11-17 15:16:46