Question

过滤器按预期运行，它返回带有post类的多个div。但是，它只返回div中的内容

<h1></h1>

而不是

<div class="post"><h1></h1></div>

是否可以获得这种输出？

即。这种输出

<div class="post"><h1></h1></div>

以下是代码：

$(result).filter('.post').each(function(i, currentElement) {
    var htmlOfSinglePost = $(this).html();
    var p = $(htmlOfSinglePost).attr("data-post-id");
    console.log(p);
});

Answer 1

假设您的result包含HTML，给定一些基本示例HTML，在.each() this中引用当前HTML元素（不是jQuery）对象。要获取外部HTML元素，可以使用outerHTML，如下所示。

要从外部内容中获取data-post-id值，请将其包装到jQuery包装器中以使用$(outerContent).data('postId')。

添加，你不能在结果上使用getAttribute()的原因来自outerHTML是因为outerHTML重新出现了 DOMString 虽然你可以把DOMString转换成一个元素此时只使用jQuery $(...outerHTML).data() 更快，但仅仅是因为您已经在使用它

$('.post').each(function(i, currentElement) {
    var outerContent = this.outerHTML;
    console.log(outerContent);
    
    var p = $(outerContent).data('postId');
    console.log('postId = ',p);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post" data-post-id="15">
  <h1>Post</h1>
</div>
<div class="post" data-post-id="57">
  <h1>Post 2</h1>
</div>

Answer 2

$(this).html();会为您提供指定选择器的内部HTML，不包括选择器本身。

你想要内部html和选择元素本身，你可能想要使用

$(selector)[0].outerHTML

这里是片段

＆＃13;

$(".post").each(function(){
console.log($(this)[0].outerHTML)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="post"><h1></h1></div>
<div class="post"><h1>This is other one</h1></div>

＆＃13;

使用Filter返回类中的内容和类本身

2 个答案: