Question

所以我在jQuery中创建了一个待办事项列表，其中＆＃39; to-do＆＃39; div是一个空的ul，并在“添加”任务＆＃39;上添加列表项。点击事件。我想在“待办事项”中显示一条消息。 ul没有项目时（例如＆＃34;你没有任务＆＃34;）。我的尝试看起来像这样并且不起作用：

if ( $('#todo-list').children().length <= 0 ) {
      $(this).append("<p>You have no tasks</p>");
  }

有什么建议吗？对不起，如果答案很明显，我已经错过了标记

Answer 1

在你的代码中，$（this）没有引用$（＆＃39;＃todo-list＆＃39;），因为它位于if块内。

要完成此操作，请使用

$('#todo-list').append("<p>You have no tasks</p>");

请参阅此fiddle

希望它有所帮助。

Answer 2

首先仔细检查是否有多个ul必须使用类选择器。

使用insertAfter而不是append，因为你不能在ul中附加一个段落。也可以使用ID选择器而不是此选择器。

 if ( $('#todo-list').children().length <= 0 ) {
      $('#todo-list').append("<p>You have no tasks</p>");
  }

Answer 3

您的代码似乎取决于this引用#todo-list元素：

if ( $('#todo-list').children().length <= 0 ) {
    $(this).append("<p>You have no tasks</p>");
}

...但是在您调用它的上下文中，this可能会引用窗口对象。 javascript中的变量范围是complicated enough that I'm going to defer to others who are much better than I at explaining it。

但是我们可以绕过所有这些，因为在这种情况下，你可以让jQuery选择器完成大部分工作：它们将隐式迭代每个匹配元素以运行任何链式函数，例如附加你的消息：

＆＃13;

// using a classname instead of an ID, since I have two lists:
$('.todo-list:empty').append('<li>You have no tasks</li>');
// (Remember also that you can't append a `<p>` to a `<ul>`!)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="todo-list">
  <li>One</li>
  <li>Two</li>
</ul>

<ul class="todo-list"></ul>

＆＃13;

:empty与＃34没有相同之处;但是没有孩子＆＃34; （文本节点计为内容，因此:empty仅匹配根本不包含任何内容的元素，即使是空格。）如果您的代码包含不方便的空格，您可以使用这个稍微复杂的选择器，它将匹配.todo-list不包含<li>元素的元素：

＆＃13;

$('.todo-list:not(:has(li))').append('<li>You have no tasks</li>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="todo-list">
  <li>One</li>
  <li>Two</li>
</ul>

<ul class="todo-list"></ul>

＆＃13;

假设，如果您正在测试的条件不能轻易地包含在路径选择器中，您可以在更简单的选择器之后链接.each()（这可能是合理的即使你知道那里只有一个元素，因为相同的代码可以正确地处理任意数量的元素，甚至是零。在该函数范围内，jQuery使用this来引用当前的DOM元素：

＆＃13;

//out here, `this` refers to the window.
$('.todo-list').each(function() {
  // inside the context of this function, `this` refers to the DOM element currently being iterated over.
  if ($(this).children().length === 0) {
    $(this).append('<li>You have no tasks</li>');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="todo-list">
  <li>One</li>
  <li>Two</li>
</ul>

<ul class="todo-list"></ul>

＆＃13;

如果div在jQuery中没有子节点，则显示文本

3 个答案: