將元素附加到：eq（2）如果頁面上有3個或更多，或者：eq（1）如果小於3

Question

我正在處理具有可變數量元素的頁面.def-set。在某些頁面上，它可以有多達60個，而在其他頁面上，它可以少至1.

我已經能夠在.def-set類的第三個實例之後附加元素.editorial-content-feed-replacement，它是我們想要什麼，但我現在想知道如果在頁面上少於3個的情況下，在.def-set的第一個或第二個實例之後是否有方法追加它。

我當前的代碼：$('.def-set:eq(2)').append('.editorial-content-feed-replacement')

Answer 1

您可以

let num = $(".def-set").length 

計算.def-set元素的數量，然後用的if-else邏輯來完成比較你想要什麼：

if (num >= 3) { 
    $('.def-set:eq(2)').append('.editorial-content-feed-replacement'); 
} else { 
    // This will append it after the last .def-set element 
    $('.def-set').append('.editorial-content-feed-replacement'); 
} 

Answer 2

您可以使用長度獲取.defSet中元素的數量 - 然後根據結果將索引設置爲1或2;

注意下面的三元運算符 - 這是一種簡短的說法 - if（長度爲< 3）{index = 1} else {index = 2};

var defSetLength = $('.def-set').length; 
var index; 
defSetLength < 3 ? index = 1 : index = 2; 
$('.def-set:eq(index)').append('.editorial-content-feed-replacement'); 

Answer 3

您可以使用slice()和last()。

使用不同長度的兩個列表示例：

$('#list-one li').slice(0,3).last().append(' - Appended content'); 
 
$('#list-two li').slice(0,3).last().append(' - Appended content'); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<strong>List one</strong> 
 
<ul id="list-one"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
</ul> 
 
<strong>List two</strong> 
 
<ul id="list-two"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>