如何从另一个文件中获取html元素值

Question

I have two html files : 我有两个html文件：

index.html 的index.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){

$.get( "target.html", function( data ) {
    var data = $(data);
var elem = $(data.find('#tst'));
console.log(elem);
});


});
</script>
</head>
<body>

<p> This an p tag</p>

</body>
</html>

target.html target.html上

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){

});
</script>
</head>
<body>

<p> This an p tag</p>
<h1 id="tst"> Test </h1>
</body>
</html>

I want the value of $('#tst') from target.html to index.html . 我想从target.html到index.html的$（'＃tst'）值。 How do I achieve it ? 我该如何实现？

Both file are in the same base directory . 两个文件都在同一个基目录中。 Also the $("#tst") value will be static. $（“＃tst”）值也是静态的。

When i do console.log($(data)) i get this object 当我做console.log（$（数据））时，我得到了这个对象

[text, script, text, script, text, p, text, h1#tst, text]
0: text
1: script
2: text
3: script
4: text
5: p
6: text
7: h1#tst
accessKey: ""align: ""attributes: NamedNodeMap0: idlength: 1__proto__: NamedNodeMapbaseURI: nullchildElementCount: 0childNodes: NodeList[1]children: HTMLCollection[0]classList: DOMTokenList[0]className: ""clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0contentEditable: "inherit"dataset: DOMStringMapdir: ""draggable: falsefirstChild: textfirstElementChild: nullhidden: falseid: "tst"innerHTML: " Test "innerText: " Test "isContentEditable: falselang: ""lastChild: textlastElementChild: nulllocalName: "h1"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: textnodeName: "H1"nodeType: 1nodeValue: nulloffsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonautocomplete: nullonautocompleteerror: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonshow: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<h1 id="tst"> Test </h1>"outerText: " Test "ownerDocument: documentparentElement: nullparentNode: document-fragmentprefix: nullpreviousElementSibling: ppreviousSibling: textscrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullspellcheck: truestyle: CSSStyleDeclarationtabIndex: -1tagName: "H1"textContent: " Test "title: ""translate: truewebkitdropzone: ""__proto__: HTMLHeadingElement
8: textlength: 9__proto__: n[0]

When i do console.log(elem) i get this object 当我做console.log（elem）时，我得到了这个对象

n.fn.init[0]
context: undefined
length: 0
selector: "#tst"
__proto__: n[0]

Answer 1

Use .find() to get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element 使用.find()获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤

Try this: 尝试这个：

 $.get("target.html", function(data) { var data = $(data); var elem = data.find('#tst'); });

Edit: 编辑：

As all the immediate childs are returned by $(data) , .find() method is not applicable here as we do not have parent selector. 因为$(data)返回所有immediate .find() ， .find()方法在这里不适用，因为我们没有parent选择器。

Create a dummy div and set html of this div as data so that we can use DummyDiv.find() 创建一个dummy div并将此div的html设置为data以便我们可以使用DummyDiv.find()

Try this: 尝试这个：

 $(document).ready(function() { $.get("target.html", function(data) { var data = $('<div>', { html: data }); var elem = data.find('#tst'); }); });

如何从另一个文件中获取html元素值

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-03-03 05:32:59

如何从另一个文件中获取html元素值

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-03-03 05:32:59

解决方案1
3 已采纳 2016-03-03 05:32:59