2リスト1の要素xにクラスyがある場合は、クラスをx要素に追加します。第2リスト

Question

私はパズルの前にいます。私は自分の問題をjavascript/jQueryに分割することができず、どうやってそれを行うのか分からない。

私は2つのリストを持っています。ここに私の最初のリストがあります。

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

私の2番目のリストの要素数は同じですが、クラスはありません。

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

がそれに同じクラスを追加します。最後に同じ位置にvar li = $(".list2 li")[idx]

を第二のリストの項目を取得し、現在の項目の$(".list1 li").each(...)

チェッククラスの値を使用して要素に

• 反復要素$(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

をこの

0のようなものを試してみてください

$(".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>