在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中選擇一個具有多個選擇器的元素

回答

相關問題