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>有一个＆＃34; with-iframe＆＃34; class，我的第二个列表中的元素（在相同的位置）也有＆＃34; with-iframe＆＃34;类。

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

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

感谢您的帮助和解释

Answer 1

您可以按照以下方式执行此操作：

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

$('.list1 li').each(function(index) {
	if ($(this).hasClass('with-iframe')) {
  	$('.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 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.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>

Answer 4

您可以简单地循环遍历第一个列表的元素，当您找到具有类with-iframe的元素时，将相同的类添加到该位置的第二个列表的项目中。

所以：

使用$(".list1 li").each(...)
检查当前项目if($(li).hasClass("with-iframe"))
获取第二个列表的项目在同一位置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>

我希望它能帮助你，再见。

2列表，如果列表1的元素x具有类y，则将类添加到x元素第二列表

4 个答案: