如果沒有文本，如何使有序列表的數量消失

Question

我有一個這樣的有序列表：

  <ol class="top-assignee">
            <li class ="1st-assignee"></li>
            <li class ="2nd-assignee"></li>
            <li class="3rd-assignee"></li>
            <li class="4th-assignee"></li>
            <li class="5th-assignee"></li>
        </ol>

然后，在我的js文件中，我使用jquery將信息附加到相應的元素。 例如，對於第一個元素：

$.getJSON(link, function (details) {
        $(/* somedata get from json*/).appendTo(".1st-assignee");
    });

具有不同json鏈接的其他4個元素相同。

但是，我的問題是有一些鏈接，它們返回null（沒有數據或鏈接可能已過期）->沒有要附加到該元素的文本。 但是在這種情況下，數字順序仍然存在。 例如：

1.Jane
2.Jake
3.
4.Josh
5.

如果沒有文本，是否有刪除號碼的方法。 這樣我就可以成為：

1.Jane
2.Jake
3.Josh

更新：感謝您的建議，但是，一個問題是我使用json來獲取數據，它花費的時間很長，因此，它將在添加之前刪除所有列表元素

Answer 1

您使用each()方法並檢查li元素是否為空：

 $("#second > li").each(function(){ if($(this).is(':empty')){ $(this).remove() } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol class="top-assignee"> <li class ="1st-assignee">Jane</li> <li class ="2nd-assignee">Jake</li> <li class="3rd-assignee"></li> <li class="4th-assignee">Josh</li> <li class="5th-assignee"></li> </ol> <br> <ol id="second" class="top-assignee"> <li class ="1st-assignee">Jane</li> <li class ="2nd-assignee">Jake</li> <li class="3rd-assignee"></li> <li class="4th-assignee">Josh</li> <li class="5th-assignee"></li> </ol> 

Answer 2

使用：empty（）

說明：選擇所有沒有子元素的元素（包括文本節點）。

 $('.top-assignee li:empty').hide() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol class="top-assignee"> <li class="1st-assignee">1</li> <li class="2nd-assignee"></li> <li class="3rd-assignee">2</li> <li class="4th-assignee"></li> <li class="5th-assignee">3</li> </ol> <ol class="top-assignee"> <li class="1st-assignee">1</li> <li class="2nd-assignee"></li> <li class="3rd-assignee">2</li> <li class="4th-assignee"></li> <li class="5th-assignee">3</li> </ol> 

Answer 3

如果數據不可用，可以將列表元素li display屬性設置為none 。

有序列表將呈現正確的訂單本身。

請參見下面的示例。

 // Sample Data var data = ['Jane','Jake','','Josh','']; // Capture all the list elements in an array var li = $('.top-assignee li'); // Iterate the data data.forEach((d, i) => { if(d) { // Check if data is non-empty li[i].innerHTML = d; // Update the list } else { li[i].style.display = 'none'; // Hide the element if no data. } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol class="top-assignee"> <li class ="1st-assignee"></li> <li class ="2nd-assignee"></li> <li class="3rd-assignee"></li> <li class="4th-assignee"></li> <li class="5th-assignee"></li> </ol> 

Answer 4

感謝您的建議，我意識到我可以使用jquery getJSON成功和錯誤句柄來做到這一點。 病在這里張貼給需要的人

 $.getJSON(link).then(function (details) {
        $("some text")
            .appendTo(".5th-assignee");
        console.log("Fifth success");
        $('.5th-assignee').show();
    },function(){
        console.log("Fifth fail");
        $('.5th-assignee').hide();
    });