jQuery的：找到2套的div

的共同要素對於這樣的標記：jQuery的：找到2套的div

<div id="set1"> 
<div id="100">a div</div> 
<div id="101">another div</div> 
<div id="102">another div 2</div> 
<div id="120">same div</div> 
</div> 

<div id="set2"> 
<div id="105">a different div> 
<div id="101">another div</div> 
<div id="110">more divs</div> 
<div id="120">same div</div> 
</div>

正如你可以同時看到＃設置1和＃SET2包含2周的div相同的ID（101，120）。有沒有可能以某種方式與jQuery找到共同的元素，並添加一個類到＃set1中的div與＃set2中的div具有相同的id？

換句話說後的腳本運行上面的代碼是這樣的：

<div id="set1"> 
<div id="100">a div</div> 
<div id="101" class="added">another div</div> 
<div id="102">another div 2</div> 
<div id="120" class="added">same div</div> 
</div> 

<div id="set2"> 
<div id="105">a different div> 
<div id="101">another div</div> 
<div id="110">more divs</div> 
<div id="120">same div</div> 
</div>

編輯玩弄它，我做了一些事，但我不知道它可以去任何地方。我創建了ID的數組中的兩組和在Firebug我可以看到

var arrEl = []; 
    $('#set1 div, #set2 div').each(function(index) { 
    var id = $(this).attr('id');    
    arrEl.push(id); 

//maybe somehow check the array for the values that appear twice, and add the class to the //matching divs? 
    });

來源

2010-04-25 tsiger

那真的是你的標記？具有相同ID的元素將是無效的HTML。

不管怎樣，我想你可以遍歷SET1的所有div和檢查，如果他們在SET2存在：

var $set2 = $('#set2'); 
var $duplicates = $.grep($('#set1 > div'), function(el) { 
    return $set2.children('#' + el.id).length > 0; 
}); 
$($duplicates).addClass('added');

在操作中查看這裏：http://jsfiddle.net/DDtQU/

來源

2010-04-25 14:47:53 Shiki

+1使用grep（） – meo 2010-04-25 14:56:59

不，這不是我的標記。這是一個簡單的例子:) thanx – tsiger 2010-04-25 17:54:19

ID應該永遠是同一文檔中被複制，它打破了spec和jQuery將只選擇第一個數組中的值每當調用ID選擇器（例如'#foo'）時，都會在文檔中出現。此外，結果將在不同的瀏覽器中不一致。我建議使用自定義屬性（或$.data）來存儲這些參考號碼。

自定義特性如下：

<div id="foo" custom="test">Hello</div>

你可以得到的custom值是這樣的：

alert($("#foo").attr("custom"));

來源

2010-04-25 14:28:42 karim79

使用無非是id選擇時，jQuery將只返回第一次出現。如果你做'$（「＃set2＃101」）'或'$（「＃set2」）。find（「＃101」）'，它會按照直觀的方式工作。您能否詳細說明「打破規範」的含義以及跨瀏覽器的一些不一致之處？ – 2010-04-25 14:33:32

我會使用數據（）。 +從不使用數字作爲ID無效 – meo 2010-04-25 14:37:12

@Fyodor - '打破規範'=「此名稱在文檔中必須是唯一的。」（來自W3C規範）。至於瀏覽器之間的不一致 - 我沒有這個例子，請觀看這個空間。每個文檔重複的ID是一種可怕的做法。此外，IE往往會扼殺數字ID（這也違反了規範）。 – karim79 2010-04-25 14:37:12

通過設置1在一個循環，併爲每個DIV去，看看有沒有在集合2中匹配：

var set2 = $("#set2"); 
var set1Divs = $("div", $("#set1)); 

for(var i = 0; i < set1Divs.size(); i++) 
{ 
    var div = set1Divs[i]; 
    var divId = div.attr("id"); 
    if (set2.find("#" + divId).size() > 0) { 
     div.addClass("added"); 
    } 
}

來源

2010-04-25 14:29:06

我在這一行上得到一個錯誤var divId = div.attr（「id」）; （div.attr不是函數） – tsiger 2010-04-25 14:40:00

或者你可以使用：set1Divs.each（functon（o，i）{}） – meo 2010-04-25 14:41:39

鑑於您的評論，您將要使用rel而不是id，這種方式創建每個集合的數組（使用map()），存儲rel的值，並將它們進行比較。

var set1 = $('#set1').children().map(function() { 
    return $(this).attr('rel'); 
}).get(); 

var set2 = $('#set2').children().map(function() { 
    return $(this).attr('rel'); 
}).get(); 

for(var i in set1) { 
    if(set1[i] == set2[i]) 
     $('#set1').children().eq(i).addClass('added') 
}

編輯：

或許更好（更短反正），試試這個：

$('#set2 > div').each(function(){ 
    $('[rel=' + $(this).attr('rel') + ']', '#set1').addClass('added') 
});

來源

2010-04-25 14:36:21 user113716

不錯的一個！但你可以使用$（'＃set2> div'）作爲選擇器。 – meo 2010-04-25 15:01:33

謝謝。是的，剛剛發佈後就發現了這一點。現在更好了。 – user113716 2010-04-25 15:03:22

即使你的代碼是不是要去有效，並且重複ID和使用數字作爲ID可以使用此代碼是非常糟糕的做法。但是，不要告訴任何人我寫的：P這裏

var campareTo = $("div#set1 > div") 
var original = $("div#set2 > div") 

original.each(function(o, i){ 
    var tempID = $(this).attr("id") 
    if (compareTo.filter("#" + tempID).length){ 
    compareTo.filter("#" + tempID).addClass('added') 
    } 
})

測試： http://jsfiddle.net/DDtQU/1/

來源

2010-04-25 14:52:53 meo

jQuery的：找到2套的div

回答

相關問題