Question

88

javascript get element unique selector

rated 0 times [ 95] [ 7] / answers: 1 / hits: 16414 / 7 Years ago, sun, february 12, 2017, 12:00:00

I am moving elements using javascript and I need to create a logic for the combinations happening during the drag/drops

I'm trying to get details from the elements, a CSS like selector could be also good, but dunno if it is possible.. (like copy-selector in chrome dev tools)

document.onmouseup = function(e){

    targetDest = e.target;

    //console.log('targetDest: ', targetDest);



    let 

    indexA = Array.from(targetCurr.parentNode.children).indexOf(targetCurr),

    indexB = Array.from(targetDest.parentNode.children).indexOf(targetDest);



    console.log(indexA, indexB);





    if(targetDest != targetCurr){

        if(targetDest == document.documentElement){

            console.log('document');

        }

        else if(targetDest == undefined){

            console.log('undefined');

        }

        else if(!targetDest){

            console.log('!dest');

        }

        else if(targetDest == null){

            console.log('null');

        }

        else if(targetDest == false){

            console.log('false');

        }

        else{

            console.log('else');

            //targetCurr.parentNode.insertBefore(targetDest, targetCurr);



            //console.log('...');

        }

    }else{

        console.log('itself');

    }





}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

albert

Add To Favorites

Follow

Total Points: 652

Total Questions: 105

Total Answers: 108

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

albert questions

1 MUI v5 - Extending Typography variant in TypeScript creates error No overload matches this call

Wed, Nov 17, 21, 00:00, 3 Years ago

1 Update one, insert if not exists and modify only when a condition is true MongoDB

Thu, Mar 19, 20, 00:00, 4 Years ago

1 React - input loses focus on keypress

Sat, Nov 9, 19, 00:00, 5 Years ago

1 Multiple select fields filtering with jQuery

Thu, Oct 24, 19, 00:00, 5 Years ago

1 How to update redux state using a react variable passed up to the component from a child

Wed, Sep 25, 19, 00:00, 5 Years ago

View All

answered 7 Years ago soniap · Accepted Answer

Keep in mind that this will not necessarily uniquely identify elements. But, you can construct that type of selector by traversing upwards from the node and prepending the element you're at. You could potentially do something like this

var generateQuerySelector = function(el) {

      if (el.tagName.toLowerCase() == html)

          return HTML;

      var str = el.tagName;

      str += (el.id != ) ? # + el.id : ;

      if (el.className) {

          var classes = el.className.split(/s/);

          for (var i = 0; i < classes.length; i++) {

              str += . + classes[i]

          }

      }

      return generateQuerySelector(el.parentNode) +  >  + str;

}



var qStr = generateQuerySelector(document.querySelector(div.moo));

alert(qStr);

body

<div class=outer>

  div.outer

  <div class=inner id=foo>

    div#foo.inner

    <div class=moo man>

      div.moo.man

    </div>

  </div>

</div>

I wouldn't suggest using this for much besides presenting the information to a user. Splitting it up and reusing parts are bound to cause problems.