如果没有文本，如何使有序列表的数量消失

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

您可以将列表元素的属性display设置为 li 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();
    });