jquery - 在 jQuery 对象中按 ID 选择以获取文本

Question

我正在尝试从尚未添加到 DOM 的 jQuery 对象中获取文本。所以：

var fragment = $("<span id='thing'>stuff</span><span id='thing2'>stuff2</span>");

但这些都不起作用（试图获取文本“stuff2”）：

var test1 = fragment.find("#thing2").text();
var test2 = $("#thing2", fragment).text(); // trying to use fragment as the context

谁能告诉我为什么不呢？在将 jQuery 对象添加到 DOM 之前，如何访问它的文本？

Answer 1

由于您已经定义了一个 jQuery 对象，您只需要使用text()：

fragment.text()

Answer 2

你没有得到它，因为你做错了。片段内没有以 id 作为事物的元素。事实片段是具有 id 作为事物的元素。所以你可以使用

fragment.html() 

或者

fragment.text()

请参阅此 Bin 示例 1

var fragment = $("<span id='outer'> <span id='inner'> Inner Span </span> </span>");
console.log($('#inner', fragment).html()); //Says Inner Span

更新 在您更新的问题中，您将片段创建为跨度数组，因此您必须从数组索引中获取元素，而不是查找具有 id 的元素。

请参阅此 bin 示例 2

// This time fragment2 is an array
var fragment2 = $("<span id='outer'> Outer Span </span><span id='inner'> Inner Span </span>");

console.log(fragment2.length);
console.log(fragment2.eq(0).html());

Answer 3

查看此示例：Bin 代码

var final = $("<span id='outer'> Outer Span </span><span id='inner'> Inner Span </span>");
// Virtual wrapper
var div = $("<div>").append(final);
console.log($("#inner", div).html());

Answer 4

我想到了。感谢“Juhana”，我只需要使用 filter() 而不是 find()。

所以改变： var test1 = fragment.find("#thing2").text(); // returns nothing 到：
var test1 = fragment.filter("#thing2").text(); // returns 'stuff2'

filter() 起作用而不是 find() 的原因是，在 中fragment，我创建了一个元素数组，span而 find() 只搜索传递的对象的子对象，其中的元素fragment没有。如果我将两个跨度filter与另一个包裹起来span，那么有一个带有子元素的元素并且 find() 将起作用。或者，在这种情况下可以使用 filter() ，因为它搜索所有元素，而不仅仅是子元素（因此不需要用 a 包装span）。

谢谢大家的宝贵建议！！