当前位置: 首页 > 面试题库 >

在Jquery中获取元素的唯一选择器

倪德业
2023-03-14
问题内容

我想创建一个类似记录器的东西,它可以跟踪用户的所有动作。为此,我需要确定用户与之交互的元素,以便在以后的会话中可以引用这些元素。

我用伪代码说过,我希望能够做以下事情

HTML示例(可能很复杂):

<html>
<body>
  <div class="example">
    <p>foo</p>
    <span><a href="bar">bar</a></span>
  </div>
</body>
</html>

用户单击链接之类的内容。现在,我需要确定被单击的元素并将其位置保存在DOM树中,以备后用:

(any element).onclick(function() {
  uniqueSelector = $(this).getUniqueSelector();
})

现在,uniqueSelector应该是这样的(我不在乎它是xpath还是css选择器样式):

html > body > div.example > span > a

这将提供保存该选择器字符串并在以后使用它的可能性,以重播用户执行的操作。

那怎么可能?


问题答案:

我自己回答,因为我找到了必须修改的解决方案。以下脚本正在运行,并且基于Blixt

jQuery.fn.extend({
    getPath: function () {
        var path, node = this;
        while (node.length) {
            var realNode = node[0], name = realNode.localName;
            if (!name) break;
            name = name.toLowerCase();

            var parent = node.parent();

            var sameTagSiblings = parent.children(name);
            if (sameTagSiblings.length > 1) { 
                var allSiblings = parent.children();
                var index = allSiblings.index(realNode) + 1;
                if (index > 1) {
                    name += ':nth-child(' + index + ')';
                }
            }

            path = name + (path ? '>' + path : '');
            node = parent;
        }

        return path;
    }
});


 类似资料:
  • 问题内容: 在我们的应用程序中,我们解析一个网页并将其加载到iFrame中的另一个页面中。该加载页面中的所有元素都有其令牌标识。我需要通过那些tokenid -s选择元素。意思是-我单击主页上的元素,然后在iFrame中选择页面中的相应元素。在jQuery的帮助下,我通过以下方式进行操作: 但是,通过此功能,我只能选择当前页面中的元素,而不能选择iFrame中的元素。谁能告诉我如何在加载的iFra

  • 问题内容: 我很难找到从jquery选择器中获取实际DOMElement的时间。样例代码: 在另一段代码中,我试图确定复选框的选中值。 而且,我不想做: 这使我无所适从,但有时我需要真正的DOMElement。 问题答案: 您可以使用以下方法访问原始DOM元素: 或更简单地说: 实际上,根据我的经验,实际上并不需要很多。以您的复选框为例: 更“ jquery’ish”和(imho)更简洁。如果要给

  • 本文向大家介绍jQuery 选择元素的子元素,包括了jQuery 选择元素的子元素的使用技巧和注意事项,需要的朋友参考一下 示例 要选择元素的子代,可以使用children()方法。 更改元素所有子.parent元素的颜色: 该方法接受一个可选selector参数,该参数可用于过滤返回的元素。            

  • 问题内容: 如何从这样的列表中选择仅父级的链接元素? 所以在css中,但不是 谢谢 问题答案: 但是,如果您要专门针对最外层的ul,则需要在根ul上设置一个类: 然后是: 确保您只有root li元素的另一种方法: 它看起来很笨拙,但可以解决问题

  • 我试图得到一个下一个元素,但它不起作用。 下面是元素列表: 我所尝试的: 我可以选择当前的div: 获取第一个元素: 现在,我想获得下一个div之后的选择的div 我尝试了很多方法(包括next()closest()find()等),但没有找到解决方法) 结果: 找不到元素。 如果我试着: 然后,我得到第二个div(包含类“items-body-content”//KO) 蓝色div之后的div怎

  • 问题内容: jQuery.unique允许您获取数组的唯一元素,但是文档说该函数主要供内部使用,并且仅对DOM元素起作用。另一个SO响应说该函数可以在数字上使用,但是此用例不一定是将来的证明,因为在文档中未明确说明。 鉴于此,是否存在“标准” jQuery函数,用于仅访问数组中的唯一值(特别是整数之类的基元)?(显然,我们可以使用函数构造一个循环,但是我们是jQuery的新手,并且想知道是否为此使