Question

我有一组李剧集。每个组在点击时只能有一个红色类，但只能在该组中。每组定义如下（分为3组），如下所示：

li有.newseason和之后的任何li，然后再次进入新赛季是一个小组。
所有lis在第一次.newseason

HTML：

<ul id="seasons">

<li class="red">Episode 1</li>
<li>Episode 2</li>
<li>Episode 3</li>

<li class="newseason">Episode 1</li>
<li class="red">Episode 2</li>
<li>Episode 3</li>

<li class="newseason">Episode 1</li>
<li>Episode 2</li>
<li class="red">Episode 3</li>
<li>Episode 4</li>

</ul>

jQuery的：

$('li').live('click',function(){
//add .red to clicked li in group and remove previous .red from same group
});

Here's the Fiddle

每个组如何在点击时只有一个红色类，但仅限于该组中的红色类？我想知道如何在不添加任何父类的情况下基于.newseason类完成它。任何帮助表示赞赏！

Answer 1

我会继续将“组”分成单独的UL标签（正如Johannes上面所建议的那样），使代码如下所示：

HTML：

<ul>
    <li>Episode 1</li>
    <li>Episode 2</li>
    <li>Episode 3</li>
</ul>

<ul>
    <li>Episode 1</li>
    <li class="red">Episode 2</li>
    <li>Episode 3</li>
</ul>

<ul>
    <li>Episode 1</li>
    <li>Episode 2</li>
    <li class="red">Episode 3</li>
    <li>Episode 4</li>
</ul>

和JS：

$('li').live('click',function(){
    $(this).parent().find('li.red').removeClass('red');
    $(this).addClass('red');
});

您可以在JSFiddle上查看：http://jsfiddle.net/w8sUz/

Answer 2

要将所有内容保留在同一个UL元素中（如您所述），您应该这样做...... http://jsfiddle.net/w8sUz/4/

我确定可能有更好/更优化的方式来实现这一目标，但这可行。

HTML

<ul class="seasons">
  <li class="newseason">Episode 1</li>
  <li class="red">Episode 2</li>
  <li>Episode 3</li>

  <li class="newseason">Episode 1</li>
  <li class="red">Episode 2</li>
  <li>Episode 3</li>

  <li class="newseason">Episode 1</li>
  <li>Episode 2</li>
  <li class="red">Episode 3</li>
  <li>Episode 4</li>
</ul>

JS：

$('li').live('click',function(){
    $(this).addClass('red');
    if( !$(this).hasClass('newseason') )
    {
        var prev = $(this).prev();
        while( prev.parent().attr('class') == 'seasons' )
        {
            if( prev.hasClass('red') )
            {
                prev.removeClass('red');
                return true;
            }
            if( prev.hasClass('newseason') )
            {
                break;
            }
            prev = prev.prev();
        }
    }        

    var next = $(this).next();
    while( next.parent().attr('class') == 'seasons' )
    {
        if( next.hasClass('newseason') )
        {
            break;
        }
        if( next.hasClass('red') )
        {
            next.removeClass('red');
            return true;
        }
        next = next.next() ;
    } 
});

希望这会有所帮助：）

Answer 3

试试这个：

$('li').live('click',function(){
$('.red').removeClass('red');
$(this).addClass('red');

jQuery - 根据类位置分隔li组

3 个答案: