我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
$("#myNode").parent(x).html();
其中“x”是节点号,以0开头作为第一个节点,如果要获取特定的节点,则应获取所需的正确节点。如果你有子节点,你应该在你想要的节点上加上一个ID,这样你就可以把它归零了。使用这种方法,没有“x”对我来说很好。
其他回答
简单的解决方案。
var myself = $('#div').children().parent();
你也可以这样做
document.getElementById(id).outerHTML
其中id是要查找的元素的id
要将完整的jQuery插件制作为.outerHTML,请将以下脚本添加到任何js文件中,并在jQuery之后包含在头中:
更新新版本有更好的控制,以及更友好的jQuery选择器服务!:)
;(function($) {
$.extend({
outerHTML: function() {
var $ele = arguments[0],
args = Array.prototype.slice.call(arguments, 1)
if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
if ($ele.length) {
if ($ele.length == 1) return $ele[0].outerHTML;
else return $.map($("div"), function(ele,i) { return ele.outerHTML; });
}
throw new Error("Invalid Selector");
}
})
$.fn.extend({
outerHTML: function() {
var args = [this];
if (arguments.length) for (x in arguments) args.push(arguments[x]);
return $.outerHTML.apply($, args);
}
});
})(jQuery);
这将使您不仅可以获得一个元素的outerHTML,甚至可以同时获得多个元素的Array返回!并且可以在以下两种jQuery标准样式中使用:
$.outerHTML($("#eleID")); // will return outerHTML of that element and is
// same as
$("#eleID").outerHTML();
// or
$.outerHTML("#eleID");
// or
$.outerHTML(document.getElementById("eleID"));
对于多个元素
$("#firstEle, .someElesByClassname, tag").outerHTML();
代码段示例:
console.log('$.outerHTML($(“#eleID”))'+“\t”,$.outrHTML($”#eleID“)));console.log('$(“#eleID”).outerHTML()'+“\t\t”,$(“#eleID”;console.log('$(“#firstEle,.someElesByClassname,tag”).outerHTML()'+“\t”,$(“#firstEle”,.someElesByClassname,tag“).outrHTML());var checkThisOut=$(“div”).outerHTML();console.log('var checkThisOut=$(“div”).outerHTML();'+“\t\t”,选中ThisOut);$.each(checkThisOut,函数(i,str){$(“div”).eq(i).text(“My outerHTML Was:”+str);});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><script src=“https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js“></script><div id=“eleID”>这将</div><div id=“firstEle”>被替换</div><div class=“someElesByClassname”>运行时</div><h3><tag>打开控制台以查看结果</tag></h3>
扩展jQuery:
(function($) {
$.fn.outerHTML = function() {
return $(this).clone().wrap('<div></div>').parent().html();
};
})(jQuery);
并像这样使用:$(“#myTableRow”).outerHTML();
还可以使用get(检索jQuery对象匹配的DOM元素)。
e.g:
$('div').get(0).outerHTML;//return "<div></div>"
作为扩展方法:
jQuery.fn.outerHTML = function () {
return this.get().map(function (v) {
return v.outerHTML
}).join()
};
Or
jQuery.fn.outerHTML = function () {
return $.map(this.get(), function (v) {
return v.outerHTML
}).join()
};
多选并返回所有匹配元素的外部html。
$('input').outerHTML()
返回:
'<input id="input1" type="text"><input id="input2" type="text">'