使用jQuery find(）.show(）来显示子项

Use jQuery find().show() to show child item

本文关键字：显示 show jQuery 使用 find      更新时间：2023-09-26

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

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

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

唯一不起作用的是Div1中再次出现的单词。

我该怎么解决这个问题？

我已经尝试使用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)); // [span, context: span]

在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

感谢adeneo，想出了这个：

    $('#Div1').on('click', 'li', function () {
        $('#Div2').append('<span data-id="' + $(this).data('id') + '">' + $(this).html() + '</span>');
        $(this).hide();
    });
    $('#Div2').on('click', 'span', function (e) {
        $('#Div1').find('[data-id="' + $(this).data('id') +'"]').show();
        $(this).remove();
    });

行：

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

正在#Div1中查找实际单击的元素（它不会在其中，因为它是#Div2单击），而不是包含与其相同文本的元素。

更改为：

$('#Div1').find(':contains('+$(this).text()+')').show();

相关文章：