2列出，如果列表1的元素X具有Y类，添加类X元素列表第二

Question

在我面前的一道难题来的。我不能将我的问题分成JavaScript/jQuery，我不知道该怎么做。

我有两个列表。这是我的第一份清单。

<ul class="list1"> 
    <li class="with-iframe"></li> 
    <li></li> 
    <li class="with-iframe"></li> 
    <li></li> 
    <li></li> 
</ul> 

我的第二个列表具有相同数量的元素但没有类。

<ul class="list2"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

我想，如果在我的第一个列表中的<li>有一个“用的iframe”级，在我的第二个列表中的元素（在相同的位置），也有“用的iframe”级。

总会有相同数量的每个列表中的项目。

是否有支持我的问题的解决方案？

谢谢你的帮助和解释

Answer 1

你可以简单地循环通过第一个列表中的元素，当你与类查找元素with-iframe同一类添加到该位置的第二列表的项目。

所以：

• 在同一位置使用当前项目if($(li).hasClass("with-iframe"))
• 的$(".list1 li").each(...)
• 检查类值获取第二列表的项目元素迭代var li = $(".list2 li")[idx]
• 最后同一类添加到元件$(li).addClass("with-iframe")

$(document).ready(function(){ 
 
    $(".list1 li").each(function(idx, li) { 
 
    if($(li).hasClass("with-iframe")){ 
 
     var li = $(".list2 li")[idx]; 
 
     $(li).addClass("with-iframe"); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list1"> 
 
    <li class="with-iframe"></li> 
 
    <li></li> 
 
    <li class="with-iframe"></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul> 
 
<ul class="list2"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

我希望它帮你，再见。

Answer 2

由纯JS。

var l1 = document.querySelectorAll('ul.list1 li'); 
 
var l2 = document.querySelectorAll('ul.list2 li'); 
 

 
for (var i = 0; i<=l1.length-1;i++){ 
 
    l2[i].className=l1[i].className 
 
}

.with-iframe{ 
 
    color:red; 
 
}

<ul class="list1"> 
 
    <li class="with-iframe"></li> 
 
    <li></li> 
 
    <li class="with-iframe"></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul> 
 

 
<ul class="list2"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 3

你可以如下做到这一点：

$('.list1 li').each(function(index) { 
    if ($(this).hasClass('with-iframe')) { 
    $('.list2 li').eq(index).addClass('with-iframe'); 
    } 
}); 

$('.list1 li').each(function(index) { 
 
\t if ($(this).hasClass('with-iframe')) { 
 
    \t $('.list2 li').eq(index).addClass('with-iframe'); 
 
    } 
 
});

.with-iframe { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list1"> 
 
    <li class="with-iframe">test</li> 
 
    <li>test</li> 
 
    <li class="with-iframe">test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
</ul> 
 

 
<ul class="list2"> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
</ul>

Answer 4

尝试是这样的

$(".list1 li.with-iframe").each(function(){ 
 
    var index = $(this).index(); 
 
    $(".list2 li:nth-child("+(index+1)+")").addClass("with-iframe"); 
 
});

.with-iframe 
 
{ 
 
    background-color: #aaa; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
First List 
 

 
<ul class="list1"> 
 
    <li class="with-iframe"></li> 
 
    <li></li> 
 
    <li class="with-iframe"></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul> 
 

 
Second list 
 

 
<ul class="list2"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>