Question

我想用jQuery为我的无序列表元素添加一个事件监听器。当单击其中一个列表元素时，将检查另一个无序列表是否具有前一个列表中的单击元素，更准确地说是它的克隆，具有相同文本的列表元素。如果后一个列表没有任何结果，但是如果它没有它，则将它的副本添加到后一个无序列表中。

我尝试使用each()来实现它，但无法在条件append()和以空selecteds列表开头的情况下成功。

我需要后一个列表selecteds，一次为空。

如何实现这一目标？

$("ul#list li").on("click", function(event) {
  var t = $(event.target).text();
  
  if ($("ul#selecteds li").length == 0) {
    $("ul#selecteds").append("<li></li>");
  }
  
  $("ul#selecteds li").each(function(index) {
    var s = $(this).text();
    if (s !== t) {
      console.log("he");
      $(event.target).clone().appendTo($("ul#selecteds"));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="selecteds">
</ul>
<ul id="list">
  <li>asdf</li>
  <li>qwer</li>
  <li>zxcv</li>
</ul>

Answer 1

您有正确的想法，但每次“选定”列表中的元素不匹配时，您都无法添加克隆。

此外，您不需要说例如。 ul#selecteds - id s是唯一的，并且足够自己。

$("#list li").on("click", function(event) {
  var t = $(this).text();   // the clicked text

  var exists = false;  // is it already selected?

  $('#selecteds li').each(function() {
    if ($(this).text() == t) {
      exists = true;   // found a match   
      return false;    // stop looking
    }
  });

  // no match? add one
  if (! exists) {
    $('<li>').text(t).appendTo('#selecteds');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="selecteds">
</ul>
<ul id="list">
  <li>asdf</li>
  <li>qwer</li>
  <li>zxcv</li>
</ul>

有条件地将clicked元素附加到另一个元素

1 个答案: