Question

对于这样的标记：

<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>

正如您所看到的，＃set1和#set2都包含2个具有相同ID（101,120）的div。是否有可能以某种方式使用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?
   });

Answer 1

这真的是你的标记吗？具有相同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/

Answer 2

ID永远不应该在同一个文档中重复，它会打破spec，只要调用ID选择器（例如'#foo'），jQuery就只会选择文档中的第一个出现。此外，不同浏览器的结果将不一致。我建议使用自定义属性（或$.data）来存储这些参考号。

自定义属性如下所示：

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

您可以像这样获得custom的值：

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

Answer 3

鉴于您的评论意味着您将使用rel而不是id，这种方式会创建每个集合的数组（使用map()），并存储{{1}的值}，并比较它们。

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') }

Answer 4

在循环中浏览set1并为每个div查看set2中是否存在匹配的：

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" );
    }
}

Answer 5

即使你的代码不是有效的，并且拥有重复的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/

jquery：在2组div中找到共同元素

5 个答案: