jquery - 匹配 Jquery 中的两个类

Question

<div>
<ul style="float:left;">
    <li class="font1">sfadsa</li>
    <li class="font2">sfadsa</li>
    <li class="font3">sfadsa</li>
</ul>
</div>

<div>
<ul style="float:right;" >
    <li class="font3">sfadsa</li>
    <li class="font1">sfadsa</li>
    <li class="font2">sfadsa</li>
</ul>
</div>

我已经为正确的 ul 标签使用了 jquery scortable 选项。因此，如果类字体 1 与右侧的类 font1 匹配，则右侧 li 标记中的 li 标签字体应更改为绿色，其他 li 标签应为红色。如果左侧类与右侧类匹配，则字体应更改为绿色。谁能帮我在 jquery 中做到这一点？

Answer 1

我不确定这是否是您想要的，但也许您可以使用它：

HTML：

<div id="left">
    <ul style="float:left;">
        <li class="font1">sfadsa</li>
        <li class="font2">sfadsa</li>
        <li class="font3">sfadsa</li>
    </ul>
</div>

<div id="right">
    <ul style="float:right;" >
        <li class="font3">sfadsa</li>
        <li class="font1">sfadsa</li>
        <li class="font2">sfadsa</li>
    </ul>
</div>

jQuery：

$('#right ul').sortable({
    stop : check
});

function check(){
    $('#right li').each(function(){
        if($(this).attr('class') == $('#left li:eq(' + $(this).index() + ')').attr('class')){
            $(this).css({'background-color':'#0f0'});
        }else{
            $(this).css({'background-color':'#f00'});
        }
    });
}

check();

演示：

http://jsbin.com/icepEMA/1

Answer 2

这个解决方案如何？这假设每个元素只有一个类：

$('ul.left li').each(function(i){
  classMatches = $('ul.right li').eq(i).hasClass($(this).attr('class'));
  if(classMatches){
    $('ul.right li').eq(i).add(this).css({color:"#F00"});
  }
});

我还提供了您的<ul>类并应用了外部 CSS 样式，首先是在 jQuery 中区分两者，其次是摆脱您的内联样式。

DEMO