在最后一个列表上创建一个元素

• Z时代
• 2024-01-10
• 分类：问答

我已经列出了一个列表，并且在单击最后一行时尝试创建一个元素。我不知道怎么解释，所以这里是的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(); 
    } 
}); 

回答：

$('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(); 
    } 
}); 

回答：

以上是 在最后一个列表上创建一个元素 的全部内容， 来源链接： utcz.com/qa/259322.html