存储和调用 [jquery] 选择器答案

【问题标题】：Store and recall a [jquery] selector存储和调用 [jquery] 选择器
【发布时间】：2013-05-21 17:02:40
【问题描述】：

我在这个网站上搜索了很多，得到了很多很好的答案，这是我第一次需要提问，因为我找不到答案。

我的脚本被注入到用户加载的页面中，因此这些页面可以是完全任意的结构。页面上总是有一些特殊的文本，我希望他们下次访问该页面时能够自动检索它们（这是一个实时值，所以我有点刮掉这个值）。

页面是如此随意，我能做到的唯一方法是让用户双击该值以“训练”脚本并检测事件和被双击的元素。这很好用，我可以检索我想要的值，并且我有一个元素的 jQuery 对象。

我不知道如何存储该元素（或者更准确地说是它的选择器），以便我可以在他们下次访问页面时检索数据，而无需他们双击它。

这是一个jsFiddle http://jsfiddle.net/troywray/YvSH9/，如果你双击红色文本，我想要的文本很容易检索。但是我可以存储什么以便以后重现选择器？

$('body').bind("dblclick", function(event){
    var dblClickElement = $(event.target);
    var specialText = dblClickElement.html();
    alert("I picked up: " + specialText);
    console.log(dblClickElement);
    console.log("selector result:", $(dblClickElement).selector); // empty string
});

控制台说 dblClickElement 是一个对象 [span.abcde] 但它是萤火虫中的可点击对象。我想要的是字符串'span.abcde'，所以我可以在将来使用它来选择。 jquery 对象的属性似乎没有等于 span.abcde

我以为我在这里找到了一些相关的东西：Get the current jQuery selector string? 但它在这里不起作用（证明在小提琴中，我明白了为什么）。

我真的不想要解析内部/外部 html 以构建选择器字符串的建议 - 如果我必须这样做，那么毫无疑问我可以解决这个问题。

另外，我确实意识到，在许多情况下，选择器可能不会给我一个唯一的元素，但我可以处理。

【问题讨论】：

问题是——一个节点可以有很多很多选择器。如果不遍历 DOM 树并构建自己喜欢的选择器，就无法将节点转换为选择器。
您是否可以通过 DOM 遍历来手动构建选择器，或者您想避免 all 遍历/HTML 操作？
@Dogbert - 谢谢 - 好点。我想我在想，在 jsFiddle 中，I 并没有告诉 jQuery 使用 span.abcde，但有些东西已经决定这是选择器 - 在这种情况下 tag.class 将是一个很好的选择器。我不应该说我必须拥有 span.abcde。我只需要一个选择器，它将返回一个或多个元素，包括我真正想要的那个（我假设我可以获得一组元素并确定我想要的索引是什么，例如 $('span')[4]
@David - 我不反对 dom 遍历，但如果我不知道中间元素有 id、名称甚至类，那能给我一个唯一的元素选择器吗？我认为像 firebug 这样的东西显示了元素的路径，因为 body/div[2]/p/span[1] 可能有助于描述元素
我想推荐这个链接。 stackoverflow.com/questions/2068272/…

标签： jquery dom dom-traversal

【解决方案1】：

为什么不设置 cookie？ http://www.electrictoolbox.com/jquery-cookies/ 有一个 jquery 插件，如果您只在页面加载后检索文本，或者如果文本在服务器上可用，服务器是否设置了 cookie？

【讨论】：

不，我认为是跨目的。我可以将选择器发送回服务器进行存储，这没有问题（我也可以使用 cookie）。问题不在于选择器的存储/检索，而是将选择器置于我可以使用的形式中，因此当将来加载相同的页面时，我可以（原则上）x = $(myStoredSelector).html()

【解决方案2】：

答案是使用@Stephan 指出的链接中票数最高的 getPath 函数。请注意，这里引用了另一个不适用于模糊节点的 getPath 函数。

getPath 给出一个字符串，可以保存以供将来参考，例如

html>body>div>p:eq(2)>span.abcde

为了将来从我使用的存储路径中查找元素（未优化）：

var bits = path.split(">");
var currentElement = null;
for (var k = 0; k < bits.length; k += 1) {
    if (k === 0) {
        currentElement = $(bits[k]);
    } else {
        currentElement = currentElement.children(bits[k]);
    }
}
var desiredText = currentElement.html();

正如@fnostro 所指出的，这取决于使用之间保持不变的 DOM 结构，但对于我的应用程序来说这不是问题。

【讨论】：