[英]How to transform element to string with jQuery
I don't need innerHTML i need innerHTML with enclosing tags. 我不需要innerHTML我需要innerHTML 和封闭标签。 Lets write some example:
让我们写一些例子:
<div id="1" style="qwe"><span class="1"></span></div>
<div id="2" style="asd"><span class="2"></span></div>
<div id="3" style="zxc"><span class="3"></span></div>
I can get element by id: 我可以通过id获取元素:
$("#1")
And how can i get string like that: 我怎么能得到这样的字符串:
<div id="1" style="qwe"><span class="1"></span></div>
Of course html() doesn't work becouse it will return only span. 当然html()不起作用因为它只返回span。
you could do something like this: 你可以这样做:
alert( $('#\\31 ').wrap("<div />").parent().html() )
$('#\\31 ').unwrap()
Something like this should work fine: 像这样的东西应该工作正常:
jQuery.fn.outerHTML = function(s) {
return s
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};
var outer = $("#1").outerHTML();
Here's a working fiddle . 这是一个工作小提琴 。
Additional Info 附加信息
See http://www.yelotofu.com/2008/08/jquery-outerhtml/ for original article . 有关原始文章,请访问http://www.yelotofu.com/2008/08/jquery-outerhtml/ 。
Use this jQuery plugin: https://github.com/brandonaaron/jquery-outerhtml/blob/master/jquery.outerhtml.js 使用这个jQuery插件: https : //github.com/brandonaaron/jquery-outerhtml/blob/master/jquery.outerhtml.js
/*! Copyright (c) 2006 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*/
(function($){
var div;
$.fn.outerHTML = function() {
var elem = this[0],
tmp;
return !elem ? null
: typeof ( tmp = elem.outerHTML ) === 'string' ? tmp
: ( div = div || $('<div/>') ).html( this.eq(0).clone() ).html();
};
})(jQuery);
Use it as follows: 使用方法如下:
$('#some-element').outerHTML();
You can use outerhtml
but in JavaScript
over the DOM
and not jQuery
, for example: 您可以在
DOM
使用outerhtml
但在JavaScript
使用而不是jQuery
,例如:
var text = document.getElementById('hello').outerHTML;
jsbin code to demonstrate: http://jsbin.com/obutul/edit#javascript,html,live jsbin代码演示: http ://jsbin.com/obutul/edit#javascript,html,live
html元素上还有一个outerHTML属性,它包含所选元素本身。
outerHTML is implemented across nearly all browsers now (including old versions of ie - firefox is the only one dragging its feet, but it's scheduled for v11 ), so I've adapted @James Hill's answer to use this native functionality where present as it should be more efficient. 现在几乎所有的浏览器都实现了outerHTML(包括旧版本的ie - firefox是唯一拖延它的版本,但它已经安排在第11版 ),所以我调整了@James Hill的答案,使用这个本机功能,因为它应该存在更有效率。
jQuery.fn.outerHTML = function(s) {
return this[0].outerHTML ? this[0].outerHTML :
s ? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};
var outer = $("#1").outerHTML();
Be aware though that there are a few cross-browser inconsistencies in outerHTML (eg look at this page in chrome and compare with ie) 请注意,在outerHTML中存在一些跨浏览器的不一致性(例如,在chrome中查看此页面并与ie进行比较)
You can wrap the desired div in another div and then fetch the parent div's html. 您可以将所需的div包装在另一个div中,然后获取父div的html。
<div><div id="1" style="qwe"><span class="1"></span></div></div>
<div><div id="2" style="asd"><span class="2"></span></div></div>
<div><div id="3" style="zxc"><span class="3"></span></div></div>
Now, 现在,
$("#1").parent().html()
will fetch the desired string. $("#1").parent().html()
将获取所需的字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.