Getting a jQuery selector for an element

Question

In psuedo code, this is what I want.

var selector = $(this).cssSelectorAsString(); // Made up method...
// selector is now something like: "html>body>ul>li>img[3]"
var element = $(selector);

The reason is that I need to pass this off to an external environment, where a string is my only way to exchange data. This external environment then needs to send back a result, along with what element to update. So I need to be able to serialize a unique CSS selector for every element on the page.

I noticed jquery has a selector method, but it does not appear to work in this context. It only works if the object was created with a selector. It does not work if the object was created with an HTML node object.

Does the selector have to use the jQuery syntax (e.g. eq()), or can it be a general CSS selector as provided by many libraries? — Dan Dascalescu
– Dan Dascalescu, Commented Aug 26, 2015 at 5:10
A little off topic but I found this question trying to find a selector for many elements on a page, not just a particular one. This is what I came up with that only used tag and classes: element.parents().toArray().reverse().splice(2).map(e => e.localName + '.' + e.classList.value.replace(/ /g, '.')).join(' ') — Jason Goemaat
– Jason Goemaat, Commented May 7, 2017 at 17:02

Blixt · Accepted Answer · 2021-01-12 13:32:53Z

57

I see now that a plugin existed (with the same name I thought of too), but here's just some quick JavaScript I wrote. It takes no consideration to the ids or classes of elements – only the structure (and adds :eq(x) where a node name is ambiguous).

jQuery.fn.getPath = function () {
    if (this.length != 1) throw 'Requires one element.';

    var path, node = this;
    while (node.length) {
        var realNode = node[0], name = realNode.name;
        if (!name) break;
        name = name.toLowerCase();

        var parent = node.parent();

        var siblings = parent.children(name);
        if (siblings.length > 1) { 
            name += ':eq(' + siblings.index(realNode) + ')';
        }

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

    return path;
};

(License: MIT)

edited Jan 12, 2021 at 13:32

answered Jan 14, 2010 at 23:42

Blixt

50.3k13 gold badges128 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Dan Over a year ago

jQuery has a built-in index function that can take care of the loop part. Just say var i = siblings.index(node) and that ought to work.

Blixt Over a year ago

@Dan: Ah, I had a feeling there'd be something like that, thanks =)

algorhythm Over a year ago

+1 Nice solution. I've made a solution working with multiple jQuery elements. But actually without your latest improvements. Maybe I will update it soon. See my answer...

algorhythm Over a year ago

I'm not sure if the solution to use an id if found is the better one. I know an id had to be unique, but I saw so many HTML code where the programmer didn't noticed that and used same id's multiole times. And I also know, that jQuery behaves different with not unique id's in different browsers. What do you think?

Dan Dascalescu Over a year ago

@algorhythm: that's why you should use a library: the problem is more complex than it seems. One such library explicitly checks that the id is indeed unique.

|

Community · Accepted Answer · 2017-05-23 12:26:35Z

23

TL;DR - this is a more complex problem than it seems and you should use a library.

This problem appears easy at the first glance, but it's trickier than it seems, just as replacing plain URLs with links is non-trivial. Some considerations:

Using descendant selectors vs. child selectors can lead to cases where the selector isn't unique.
Using :eq() limits the usefulness of the solution, as it will require jQuery
Using tag+nth-child selectors can result in unnecessarily long selectors
Not taking advantage of ids makes the selector less robust to changes in the page structure.

Further proof that the problem isn't as easy as it seems: there are 10+ libraries that generate CSS selectors, and the author of one of them has published this comparison.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 26, 2015 at 4:52

Dan Dascalescu

154k66 gold badges336 silver badges422 bronze badges

Comments

alex · Accepted Answer · 2010-01-14 23:48:48Z

10

jQuery-GetPath is a good starting point: it'll give you the item's ancestors, like this:

var path = $('#foo').getPath();
// e.g., "html > body > div#bar > ul#abc.def.ghi > li#foo"

edited Jan 14, 2010 at 23:48

alex

492k205 gold badges890 silver badges992 bronze badges

answered Jan 14, 2010 at 23:37

Agos

19.6k11 gold badges60 silver badges72 bronze badges

2 Comments

Dan Dascalescu Over a year ago

jQuery-GetPath isn't on Github, and apparently hasn't been maintained since 2011. There are 10+ legit libraries that generate CSS selectors, and the author of one of them has published this comparison.

Alvaro Over a year ago

The most upvoted solution returned "undefined" for me, so this small function worked much better!

crizCraig · Accepted Answer · 2011-07-26 21:01:26Z

7

Here's a version of Blixt's answer that works in IE:

jQuery.fn.getPath = function () {
    if (this.length != 1) throw 'Requires one element.';

    var path, node = this;
    while (node.length) {
        var realNode = node[0];
        var name = (

            // IE9 and non-IE
            realNode.localName ||

            // IE <= 8
            realNode.tagName ||
            realNode.nodeName

        );

        // on IE8, nodeName is '#document' at the top level, but we don't need that
        if (!name || name == '#document') break;

        name = name.toLowerCase();
        if (realNode.id) {
            // As soon as an id is found, there's no need to specify more.
            return name + '#' + realNode.id + (path ? '>' + path : '');
        } else if (realNode.className) {
            name += '.' + realNode.className.split(/\s+/).join('.');
        }

        var parent = node.parent(), siblings = parent.children(name);
        if (siblings.length > 1) name += ':eq(' + siblings.index(node) + ')';
        path = name + (path ? '>' + path : '');

        node = parent;
    }

    return path;
};

answered Jul 26, 2011 at 21:01

crizCraig

8,9576 gold badges59 silver badges54 bronze badges

1 Comment

Dan Dascalescu Over a year ago

This problem may seem simple, but in actuality it's a little more complex - generating unique CSS selectors that ideally are somewhat robust to changes in the page structure. There are 10+ libraries that generate CSS selectors, and the author of one of them has published this comparison.

Ahmet Can Güven · Accepted Answer · 2013-05-31 20:37:46Z

5

I just wanted to share my version too because it is very clear to understand. I tested this script in all common browsers and it is working like a boss.

jQuery.fn.getPath = function () {
    var current = $(this);
    var path = new Array();
    var realpath = "BODY";
    while ($(current).prop("tagName") != "BODY") {
        var index = $(current).parent().find($(current).prop("tagName")).index($(current));
        var name = $(current).prop("tagName");
        var selector = " " + name + ":eq(" + index + ") ";
        path.push(selector);
        current = $(current).parent();
    }
    while (path.length != 0) {
        realpath += path.pop();
    }
    return realpath;
}

answered May 31, 2013 at 20:37

Ahmet Can Güven

5,4524 gold badges43 silver badges61 bronze badges

1 Comment

Dan Dascalescu Over a year ago

A selector that doesn't use ids is fragile.

algorhythm · Accepted Answer · 2015-05-12 21:53:26Z

Same solution like that one from @Blixt but compatible with multiple jQuery elements.

jQuery('.some-selector') can result in one or many DOM elements. @Blixt's solution works unfortunately only with the first one. My solution concatenates all them with ,.

If you want just handle the first element do it like this:

jQuery('.some-selector').first().getPath();

// or
jQuery('.some-selector:first').getPath();

Improved version

jQuery.fn.extend({
    getPath: function() {
        var pathes = [];

        this.each(function(index, element) {
            var path, $node = jQuery(element);

            while ($node.length) {
                var realNode = $node.get(0), name = realNode.localName;
                if (!name) { break; }

                name = name.toLowerCase();
                var parent = $node.parent();
                var sameTagSiblings = parent.children(name);

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

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

            pathes.push(path);
        });

        return pathes.join(',');
    }
});

Konrad Dzwinel · Accepted Answer · 2017-09-17 22:11:22Z

2

If you are looking for a comprehensive, non-jQuery solution then you should try axe.utils.getSelector.

answered Sep 17, 2017 at 22:11

Konrad Dzwinel

38.1k12 gold badges102 silver badges106 bronze badges

Comments

Develop Ideas · Accepted Answer · 2014-11-17 10:39:28Z

1

Following up on what alex wrote. jQuery-GetPath is a great starting point but I have modified it a little to incorporate :eq(), allowing me to distinguish between multiple id-less elements.

Add this before the getPath return line:

if (typeof id == 'undefined' && cur != 'body') {
    allSiblings = $(this).parent().children(cur);
    var index = allSiblings.index(this);// + 1;
    //if (index > 0) {
        cur += ':eq(' + index + ')';
    //}
}

This will return a path like "html > body > ul#hello > li.5:eq(1)"

answered Nov 17, 2014 at 10:39

Develop Ideas

1431 gold badge1 silver badge10 bronze badges

2 Comments

Dan Dascalescu Over a year ago

There are 10+ libraries that generate CSS selectors, and the author of one of them has published this comparison.

James Moore Over a year ago

@DanDascalescu The comparison hasn't been updated in a long time, unfortunately.

Ashraf Sabry · Accepted Answer · 2022-02-13 08:28:21Z

Update: This code was changed since then. You may find the implementation of the function now at css-login.js

Original answer: You may also have a look at findCssSelector, which is used in Firefox developer tools to save the currently selected node upon page refreshes. It doesn't use jQuery or any library.

const findCssSelector = function(ele) {
ele = getRootBindingParent(ele);
  let document = ele.ownerDocument;
  if (!document || !document.contains(ele)) {
    throw new Error("findCssSelector received element not inside document");
  }

  let cssEscape = ele.ownerGlobal.CSS.escape;

  // document.querySelectorAll("#id") returns multiple if elements share an ID
  if (ele.id &&
      document.querySelectorAll("#" + cssEscape(ele.id)).length === 1) {
    return "#" + cssEscape(ele.id);
  }

  // Inherently unique by tag name
  let tagName = ele.localName;
  if (tagName === "html") {
    return "html";
  }
  if (tagName === "head") {
    return "head";
  }
  if (tagName === "body") {
    return "body";
  }

  // We might be able to find a unique class name
  let selector, index, matches;
  if (ele.classList.length > 0) {
    for (let i = 0; i < ele.classList.length; i++) {
      // Is this className unique by itself?
      selector = "." + cssEscape(ele.classList.item(i));
      matches = document.querySelectorAll(selector);
      if (matches.length === 1) {
        return selector;
      }
      // Maybe it's unique with a tag name?
      selector = cssEscape(tagName) + selector;
      matches = document.querySelectorAll(selector);
      if (matches.length === 1) {
        return selector;
      }
      // Maybe it's unique using a tag name and nth-child
      index = positionInNodeList(ele, ele.parentNode.children) + 1;
      selector = selector + ":nth-child(" + index + ")";
      matches = document.querySelectorAll(selector);
      if (matches.length === 1) {
        return selector;
      }
    }
  }

  // Not unique enough yet.  As long as it's not a child of the document,
  // continue recursing up until it is unique enough.
  if (ele.parentNode !== document) {
    index = positionInNodeList(ele, ele.parentNode.children) + 1;
    selector = findCssSelector(ele.parentNode) + " > " +
      cssEscape(tagName) + ":nth-child(" + index + ")";
  }

  return selector;

};

@SantoshDangare This code was changed since then. You may find the implementation of the function now at hg.mozilla.org/mozilla-central/file/tip/devtools/shared/…

pepper69 · Accepted Answer · 2015-04-10 14:59:58Z

-1

$.fn.getSelector = function(){
    var $ele = $(this);
    return '#' + $ele.parents('[id!=""]').first().attr('id') 
               + ' .' + $ele.attr('class');
};

answered Apr 10, 2015 at 14:59

pepper69

12 bronze badges

2 Comments

Yasen Zhelev Over a year ago

How is that going to help for solving the problem?

pepper69 Over a year ago

Oops, sorry, I should have mentioned this only works for selectors like '#foo .bar' which are very common in the world I live in.

Collectives™ on Stack Overflow

Getting a jQuery selector for an element

10 Answers 10

8 Comments

Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

8 Comments

Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related