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（没有数据或链接可能已过期） - ＆gt;没有要附加到该元素的文本。但在这种情况下，数字顺序仍然存在。看起来像这样：

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

如果没有文字，有没有删除号码。这样我就可以成为：

1.Jane
2.Jake
3.Josh

更新：感谢你们的建议，但是，一个问题是我使用json获取数据并且需要相当长的时间，因此，它会在追加之前删除所有列表元素

Answer 1

您使用each()方法并检查是否有任何li元素为空：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用:empty()

描述：选择所有没有子元素的元素（包括文本节点）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

如果数据不可用，您可以将列表元素display的{{1}}属性设置为li。

有序列表将自行呈现正确的顺序。

请参阅下面的示例。

＆＃13;

none

＆＃13;

// 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.
  }
});

＆＃13;

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

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

4 个答案: