如何从 Jquery 中的 HTML DOM 获取属性？答案

【问题标题】：How to get Attributes from HTML DOM in Jquery?如何从 Jquery 中的 HTML DOM 获取属性？
【发布时间】：2013-06-19 10:25:21
【问题描述】：

我有一个保存在 JavaScript 变量中的 HTML DOM 我如何获取它的属性。经验：

<script>
//element_html is ajax response
var element_html = '<h1 style="" class="app-control " data-order="10" data-id="48" id="heading_2_48">Heading</h1>'; 

var id = "heading_2_48";
var data-order="10"

</script>

如何获得这些 id 和 data-order

【问题讨论】：

将其包装在一个 jquery 对象中
只有在附加到某个元素时才能访问。或包裹在 jquery 对象中

标签： javascript jquery html ajax dom

【解决方案1】：

试试jQuery解决方案：

$(element_html).attr("id");
$(element_html).attr("data-order");

下一个在性能方面甚至更好，因为它只创建一个 jQuery 对象：

var jWrapper = $(element_html);
var element_html_id = jWrapper.attr("id");
var element_html_data_order = jWrapper.attr("data-order");

或者你可以试试Vanilla JavaScript解决方案：

var d=document.createElement("div");
d.innerHTML = (element_html);
var attrs = d.firstChild.attributes;
var element_html_id  = attrs["id"];
var element_html_data_order = attrs["data-order"];

(JSFiddle:http://jsfiddle.net/6fVdr/1/)

【讨论】：

【解决方案2】：

这样试试

$(element_html).find('h1').attr('id');
$(element_html).find('h1').data('order');

您也可以使用类名app-control 代替h1 进行过滤。您也可以使用filter 代替find

$(element_html).filter('h1').attr('id');
$(element_html).filter('h1').data('order');

【讨论】：

谢谢老板我从你的回答中得到了另一个好主意 .data('order');
感谢@roasted 的建议，我已经编辑了我的答案......我认为 find 也将起作用

【解决方案3】：

$(element_html).find('h1').prop('id');
$(element_html).find('h1').prop('data-order');

更新如下：

在上面的代码中find 不起作用，这是我理解的错误。

$(element_html).prop('id');
$(element_html).prop('data-order');

感谢“Roasted”对我的暗示。

【讨论】：

@roasted:我可以知道原因吗？
因为 .find() 正在寻找后代，所以这里的 h1 不是包装对象的后代：jsfiddle.net/nLL5h 要使用 .find() 你需要这样的东西：$('<div/>').html(element_html).find('h1').prop('id')

【解决方案4】：

将您的元素包装到 Jquery 对象中。

var val = $(element_html).attr("id");

【讨论】：

【解决方案5】：

var element_html = '<h1 style="" class="app-control " data-order="10" data-id="48" id="heading_2_48">Heading</h1>';

console.log($(element_html).filter('h1').attr('id'));
console.log($(element_html).filter('h1').attr('data-order'));

http://jsfiddle.net/tsrrR/

作品 ;)

【讨论】：

@roasted ...是的，我编辑了它并为它贴了一个小提琴 - 根据你的评论 - 所以它可以工作