在最後一個列表上創建一個元素

我已經列出了一個列表，並且在單擊最後一行時嘗試創建一個元素。我不知道怎麼解釋，所以這裏是的jsfiddle：http://jsfiddle.net/ckgL3zxd/4/在最後一個列表上創建一個元素

正如你可以看到與class="blue"的元素將列表之間產生，而不是當您單擊最後一行。這是因爲沒有li匹配JQuery eq()。

有人知道如何解決這個問題嗎？

HTML

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
    <li>11</li> 
    <li>12</li> 
    <li>13</li> 
    <li>14</li> 
</ul>

CSS

li { 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    margin: 10px; 
    float: left; 
    list-style: none; 
} 
.blue { 
    background: blue; 
    width: 100%; 
} 
.active { 
    background: red; 
}

JQuery的

$('ul li').on('click', function() { 
    var lisInRow = 0; 

    $('ul li').each(function() { 
     if ($(this).prev().length > 0) { 
      if ($(this).position().top != $(this).prev().position().top) return false; 
      lisInRow++; 
     } else { 
      lisInRow++; 
     } 
    }); 


    var calc = ($(this).index() + 1)/lisInRow, 
     roundup = Math.ceil(calc), 
     together = roundup * lisInRow; 

    if (!$(this).hasClass('active')) { 
     $('ul li').removeClass('active').siblings('.blue').remove(); 
     $(this).addClass('active'); 
     $('ul li').eq(together - 1).after('<li class="blue"></li>'); 
    } else { 
     $('ul li').removeClass('active').siblings('.blue').remove(); 
    } 
});

來源

2015-02-17 Chanckjh

這是因爲 '合' 爲18的最後一排，和你想添加的藍色元素在第17'ul li'之後，不存在。只要檢查它是否超過你的'ul li'對象的總數，如果是這樣 - 將其改爲該值。

編輯：這爲我工作：

$('ul li').on('click', function() { 
    var lisInRow = 0; 
    var ulLisCnt = document.getElementsByTagName('li').length; 
    $('ul li').each(function() { 
     if ($(this).prev().length > 0) { 
      if ($(this).position().top != $(this).prev().position().top) return false; 
      lisInRow++; 
     } else { 
      lisInRow++; 
     } 
    }); 


    var calc = ($(this).index() + 1)/lisInRow, 
     roundup = Math.ceil(calc), 
     together = roundup * lisInRow; 

    if (together > ulLisCnt) together = 14; 

    if (!$(this).hasClass('active')) { 
     $('ul li').removeClass('active').siblings('.blue').remove(); 
     $(this).addClass('active'); 
     $('ul li').eq(together - 1).after('<li class="blue"></li>'); 
    } else { 
     $('ul li').removeClass('active').siblings('.blue').remove(); 
    } 
});

來源

2015-02-17 20:48:22

我知道，這就是爲什麼我說它不匹配'eq（）'，那就是問題所在。 – Chanckjh 2015-02-17 20:50:40

正確。好吧，看我的編輯我的解決方案。 – 2015-02-17 20:53:27

對不起，但這不適合我。藍色元素確實進入列表的最後，但是藍色元素不再進入列表之間。 – Chanckjh 2015-02-17 20:59:08

感謝伊利達MOR，我已經找到了線索如何解決它。如果eq()大於li的數量，則創建最後一個li之後的元素。

來源

2015-02-17 22:01:33 Chanckjh

在最後一個列表上創建一個元素

回答

相關問題