jquery - jQuery - 根据类位置分隔 li 组

Question

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

1. li 有 .newseason 并且在它之后的任何 li 在再次进入 newseason 之前都是一个组。

2. 第一个 .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
});

这是小提琴

每个组怎么可能只有一个点击时的红色类，但只能来自该组？我想知道如何在不添加任何父类的情况下基于 .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');