javascript - 使用 jQuery find().show() 显示子项

Question

我正在尝试使用jQuery Find重新显示隐藏的单词。

当我点击 Div1 单词时，它们将被附加到 Div2 并在 Div1 中隐藏。

当我点击 Div2 单词时，它们将被删除并重新显示在 Div1 中。

唯一不起作用的是这个词重新出现在 Div1 中。

我该如何解决这个问题？

我尝试使用 find() 传入被单击的元素。 Find 表示它接受一个元素，这就是我传递给 find 的元素: .find( element )

    $('#Div1').on('click', 'li', function () {

        $('#Div2').append('<span>' + $(this).html() + '</span>');

        $(this).hide();
    });

    $('#Div2').on('click', 'span', function (e) {

        console.log($(this)); // [span, context: span]

        $('#Div1').find($(this)).show();

        $(this).remove();

    });

在 Div2 中，我正在控制台记录该元素，其中显示:

console.log($(this));//[跨度，上下文:跨度]

Answer 1

在 Div2 中，您无法使用 span 选择器从第一个 div 中查找元素。您可以使用 :contains() 选择器从 Div1 中选择该元素(如果 Div1 有许多 li 将失败内容相同)

$('#Div1').on('click', 'li', function() {
  $('#Div2').append('<span>' + $(this).html() + '</span>');
  $(this).hide();
});

$('#Div2').on('click', 'span', function(e) {
  var text = this.innerText;
  $('#Div1 :contains(' + text + ')').show();
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Div1">
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

<div id="Div2"></div>

Fiddle here