How to get the unique selector of elements

Question

I am doing an editor where when user clicks a text or anything in the html document, I get it changed and record the changes in the database. It is a widget I am doing. Thus this is my question. Suppose I have an html element of the following structure:

<html>
  <table>
    <tr>
       <td>Apple</td>
       <td>Pear</td>
    </tr>
    <tr>
      <td>Chicken</td>
      <td>Beef</td>
    </tr>
  </table>
  <div id="one">
       <p>Red</p>
       <p>Orange</p>
  </div>
  <div class="two">
      <p>Green</p>
      <p>Purple</p>
  </div>
  <div class="two">
      <p>Black</p>
      <p>Blue</p>
  </div>
</html>

When user clicks Apple, the unique path is (Jquery):

table:eq(0)>tr:eq(0)>td:eq(1)

Suppose user clicks Red, the unique path is (Jquery):

div#one:eq(o) > p:eq(0)

Is there any plugin readily available to uniquely identify the selectors?

Currently I am using this function:

function getUniquePath2(node){
                  var parentEls = node.parentsUntil('[id]').add( node.closest('[id]') )
                  .map(function () {
                        return this.tagName + (this.id ? '#' + this.id : "");
                  })
                  .get().join(">");

                  return parentEls;
              }

However the above won't support and I have been researching for 4 days and I don't get an idea of how I should do it. The reason I am doing this because I want to track the user changes and change the elements as per the draft the user has made. The issue is, some elements do not have id's and the xpath conflicts with other elements. For instance if I want to change Green. How would it be unique anymore?

Maybe this framework can solve your issue http://angularjs.org/ — gotqn, Aug 30 '13 at 09:52
Scroll down and spent few minutes to check the examples. If I understand you correctly, the whole "task" can be completed easily using the framework (dynamically changing the text and updating it in the database). — gotqn, Aug 30 '13 at 09:57
How do you intend to store the changes in your database? Don't you just store the document as XML? — Bergi, Aug 30 '13 at 09:59
Have you tried updating your snippet to support the element index? Where did you struggle? — Bergi, Aug 30 '13 at 10:00
I am struggling the part where the unique selector is not really unique. I dunno how else I can uniquely select. The above sees if the parent has Id and maps only for ids...What if the selector is made of class? — madi, Aug 30 '13 at 10:04

score 1 · Accepted Answer · answered Aug 30 '13 at 09:58

1

What about something like this ?

var getUniquePath = function( node ) {

    var parts = [ ];

    $( node ).parents().each( function( index, element ) {
        parts .push( element.tagName + '[' + $(element).index() + ']' );
    });

    return parts.join( '', parts.reverse() );
}

answered Aug 30 '13 at 09:58

Virus721

8,061
12
67
123

shouldn't you use the `eq` filter instead of brackets: ` element.tagName + ':eq(' + $(element).index() + ')'` – gion_13 Aug 30 '13 at 10:04
the syntax i used doesn't really matter, i'm just giving the direction. If the goal is to create a selector then yeah, it should be that, but it's a detail. – Virus721 Aug 30 '13 at 12:12
I'm just saying that your answer is not *complete*. It is good; haven't tested it, but I'd probabbly do it in a similar way. – gion_13 Aug 30 '13 at 15:45
1

the selector string is not compatible with js querySelector methods! – priojeet priyom Sep 01 '20 at 07:41

How to get the unique selector of elements

1 Answers1