jQuery 选择器返回的对象的完整 HTML

发布于 2024-09-15 12:37:05 字数 573 浏览 3 评论 0原文

给定这个 html:

<li id="the_list_item"><img src="some_img"></li>

和这个选择器：

$("#the_list_item")

我想从 jQuery 选择器返回的对象中获取完整的 html。

使用：

$("#the_list_item").html()

...只是给了我内部html（部分）

但是因为：

$("#the_list_item").attr("id")

给了我'the_list_item'，这表明整个列表项确实是包含在返回的对象中..那么如何从该对象获取完整代码？

我想从我的对象中获取一个字符串：

，但找不到方法去做它。

原文

given this html:

<li id="the_list_item"><img src="some_img"></li>

and this selectior:

$("#the_list_item")

I want to get the full html from the object return by the jQuery selector.

Using:

$("#the_list_item").html()

...just gives me the inner html (the <img src="some_img"> part)

But since:

$("#the_list_item").attr("id")

gives me 'the_list_item', this indicated that the whole list item is indeed included in the object returned.. so how do I get the full code from that object?

I want to get a String: <li id="the_list_item"><img src="some_img"></li> from my object, but can't find the way to do it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水水月牙 2024-09-22 12:37:06

不幸的是，outerHTML 解决方案（上面接受的解决方案）在 FireFox 9 / Windows 7 / JQuery 1.7 上对我不起作用......

根据 Chetan Sastry（上面的答案），这是对我有用的东西：

var el = jQuery('#the_list_item').first();
var outerHtml = jQuery('<div>').append(el).html();

Unfortunately, the outerHTML solution (accepted solution above) did not work for me on FireFox 9 / Windows 7 / JQuery 1.7 ...

Here is something that worked for me, according to Chetan Sastry (answer above):

var el = jQuery('#the_list_item').first();
var outerHtml = jQuery('<div>').append(el).html();

回复收藏 0 原文

时常饿 2024-09-22 12:37:06

您是否尝试过$("#the_list_item").parent().html()？

回复收藏 0 原文

云裳 2024-09-22 12:37:06

在这里，您可以找到一个很好的解决方案，采用 jQuery externalHtml 插件代码的形式： http: //yelotofu.com/2008/08/jquery-outerhtml/

回复收藏 0 原文

暖阳 2024-09-22 12:37:06

创建一个新的 div DOM 对象并附加该 div 的克隆，然后获取包装的 div 的内容，最后删除创建的 DOM 对象。

var html = $('<div>').append($('#the_list_item').clone()).remove().html();

Creating a new div DOM object and appending a clone of the div, then get the contents of wrapped div and finally removing the created DOM object.

var html = $('<div>').append($('#the_list_item').clone()).remove().html();

回复收藏 0 原文

凝望流年 2024-09-22 12:37:06

有相应的插件。只需谷歌搜索“jQuery externalhtml”即可。其中大多数背后的想法是克隆元素，将其附加到空 div 并获取该 div 的 html。

回复收藏 0 原文

不再让梦枯萎 2024-09-22 12:37:05

我不确定这是否有效，但可能值得一试：

var html = $('#the_list_item')[0].outerHTML;
alert(html);

var html = $('#the_list_item')[0].outerHTML;
console.log(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="the_list_item"><img src="some_img"></li>
</ul>

I'm not sure if this works, but it might be worth a shot:

var html = $('#the_list_item')[0].outerHTML;
alert(html);

var html = $('#the_list_item')[0].outerHTML;
console.log(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="the_list_item"><img src="some_img"></li>
</ul>

回复收藏 0 原文

淡墨 2024-09-22 12:37:05

一种方法是创建您自己的包装器：

$("#the_list_item").wrap('<div>').parent().html();

...做您的事情，然后展开：

$("#the_list_item").unwrap();

One way is to create your own wrapper:

$("#the_list_item").wrap('<div>').parent().html();

...do your thing, then unwrap:

$("#the_list_item").unwrap();

回复收藏 0 原文

我的鱼塘能养鲲 2024-09-22 12:37:05

留下以防万一现在有人仍在寻找这个。
完整的 jQuery 解决方案：

$('#the_list_item').prop('outerHTML');

Leaving just in case someone nowadays is still looking for this.
Full jQuery solution:

$('#the_list_item').prop('outerHTML');

回复收藏 0 原文

樱＆纷飞 2024-09-22 12:37:05

这是我的解决方案，不需要 jQuery！

// Get a reference to the element by its ID.
var oEl = document.getElementById('the_list_item');
// Getting the outerHTML of an element:
var sOuterHTML = oEl.outerHTML;
 alert( sOuterHTML );

或者，也可以通过jQuery获取元素的引用，然后获取outerHTML。

var sOuterHTML = $('#the_list_item')[0].outerHTML;
alert( sOuterHTML );
// or
var  sOuterHTML = $('#the_list_item').get(0).outerHTML;
alert( sOuterHTML );

Here my solution, No jQuery required!

// Get a reference to the element by its ID.
var oEl = document.getElementById('the_list_item');
// Getting the outerHTML of an element:
var sOuterHTML = oEl.outerHTML;
 alert( sOuterHTML );

Alternatively, it could be get the reference of element by means of jQuery, and then get the outerHTML.

var sOuterHTML = $('#the_list_item')[0].outerHTML;
alert( sOuterHTML );
// or
var  sOuterHTML = $('#the_list_item').get(0).outerHTML;
alert( sOuterHTML );

回复收藏 0 原文