php - 使用 Jquery 只保留 html 中的某些元素

Question

我试图仅保留使用 jQuery 添加到文本区域的某些元素。我使用 MutationObserver 来查找添加到 div 的任何新项目并将其复制到表单。

// passes content to the string, new items are also found
// and added using the MutationObserver
//
var stringContent = $("#OriginalOutput").html() 

但是，在本例中，我希望获取 html 中找到的所有新“li”。

我尝试了一些这样的方法，例如:

var stringContent = $("#OriginalOutput").clone().find('.container')
  .insertAfter().end().html();

这有效，但只给我里面的第一个“li”元素。我还尝试了其他方法，用其他方法替换 insertAfter ，这给我带来了相同的结果，但没有给出它找到的所有“li”元素。

我已经在其他地方调用了 ul 元素，我只需要将找到的所有“li”元素传递到字符串中。这样我就可以在这里使用它:

//edited from #OriginalOutput to #output
$("#output").val("<ul class=\"mylist\">\n" + stringContent + "</ul>");

我尝试的另一种方法是删除我不需要的元素，只是为了保留所有已添加的“li”，但我遇到的问题是我不知道如何删除每个类，如果我删除父 div 包含所有元素，它只会获取其中的所有内容，包括“li”元素，所以我确信我不能这样做。虽然我确实尝试在最终输出中使用 PHP 和 str_replace 来获取它，但只能获取某些元素，因为我需要删除输出唯一 id 的大多数元素。

Answer 1

使用.each()函数。如果您只交付一个元素，这可能会有所帮助。将 jQuery 更改为如下所示:

var stringContent = '';
$("#OriginalOutput").clone().find('li').each(function(){
  var t = $(this);
  stringContent += t[0].outerHTML;
}

<小时/>

更新

每个提问者的评论:

我的猜测是，您的问题不在于拉出项目，而在于将它们放入。我会将您插入项目的方式更改为:

$("#OriginalOutput").clone().find('li').each(function(){
  var t = $(this);
  $("#OriginalOutput").append(t);
});

我不确定您为什么在原始答案中选择 val()，我只是假设 $('#OriginalOutput') 是一个隐藏元素。如果它是隐藏元素，您可能需要在函数中从头开始构造一个克隆，如下所示:

var myCloneElement = $(document.createElement('ul'));
myCloneElement = $('#myTargetList').clone();
$("#OriginalOutput").clone().find('li').each(function(){
  var t = $(this);
  myCloneElement.append(t);
});
$('#myTargetList').html(myCloneElement.html());