0
<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 中做到这一点?

4

2 回答 2

0

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

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

于 2013-11-12T10:00:22.997 回答
0

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

$('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

于 2013-11-12T09:50:59.907 回答