如何使用jQuery Filter获取包含内容的目标class元素本身？

你现在碰到的情况我懂——用filter('.post')拿到目标元素后，调用.html()只能获取内部的内容标签，拿不到包含这些内容的整个<div class="post">...</div>本身对吧？

问题出在你用了.html()方法，它本来就是用来获取元素内部HTML的。要拿到包含自身的完整元素，有两种常用的方式：

方式1：获取完整元素的HTML字符串 #

如果需要把整个元素转成HTML字符串保存或使用，用prop('outerHTML')替代.html()就可以了，同时直接从当前元素取data-post-id更准确（因为这个属性应该是在.post本身上，不是内部元素）：

$(result).filter('.post').each(function(i, currentElement) {
  // 获取包含自身的完整HTML
  var fullPostElementHtml = $(this).prop('outerHTML');
  // 直接从当前.post元素取data属性
  var postId = $(this).attr("data-post-id");
  console.log(fullPostElementHtml); // 输出完整的<div class="post">...</div>
  console.log(postId);
});

方式2：直接操作DOM元素本身 #

如果不需要转成字符串，只是要操作这个元素本身，那each回调里的currentElement就是完整的.post DOM节点，$(this)也是对应的jQuery对象，直接用就行：

$(result).filter('.post').each(function(i, currentElement) {
  // currentElement就是原生的<div class="post">DOM元素
  console.log(currentElement);
  // 用jQuery的data方法取属性更简洁
  var postId = $(this).data("post-id");
  console.log(postId);
});

另外提一句：你之前代码里$(htmlOfSinglePost).attr("data-post-id")的写法其实没必要，因为htmlOfSinglePost是内部内容，里面的元素大概率没有data-post-id，这个属性肯定是挂在.post元素上的，直接从$(this)取才是正确的方式。

内容的提问来源于stack exchange，提问作者user9788055