All geek questions in one place

Getting an item to select

Running into a problem and basically trying to create a variable that can be used as a selector. eg,

$('a').click(function(){ var selector = $(this).dompath(); });

HTML:

 html body div div /div /div ul li li /ul div ul li li li hello world /ul /div body html

it will return something like

 path = html body div ul li:contains('hello world')

then I could use this in the selector to select this div, so if I liked

 $(path).text() would return "hello world"

many thanks!

+6
source share
4 answers

Maybe something like this:

 function dompath( element ) { var path = ''; for ( ; element && element.nodeType == 1; element = element.parentNode ) { var inner = $(element).children().length == 0 ? $(element).text() : ''; var eleSelector = element.tagName.toLowerCase() + ((inner.length > 0) ? ':contains(\'' + inner + '\')' : ''); path = ' ' + eleSelector + path; } return path; }

This changed the method from another question to go through and add the full text content of the tag using the operator :contains() only if the tag has no tags for children.

I tested this method:

 $(document).ready(function(){ $('#p').click(function() { console.log(dompath(this)); }); });

Against this:

 <html> <body> <div> <div> </div> </div> <ul> <li></li> <li></li> </ul> <div> <ul> <li id="p">hi</li> <li></li> <li id="p2">hello world</li> </ul> </div> <body> <html>

The results of pressing p are then output as:

html body div ul li: contains ('hi')

+11
source

A modified version of the fantastic jcern` code .

Features:

  • If the item has an identifier: show only #elementId
  • If the identifier is missing: show element.className
  • If the class is not present: show element with it innerHtml added (if any)
  • Skip <body> and <html> elements to reduce output
  • Doesn't rely on jQuery
 function dompath(element) { var path = '', i, innerText, tag, selector, classes; for (i = 0; element && element.nodeType == 1; element = element.parentNode, i++) { innerText = element.childNodes.length === 0 ? element.innerHTML : ''; tag = element.tagName.toLowerCase(); classes = element.className; // Skip <html> and <body> tags if (tag === "html" || tag === "body") continue; if (element.id !== '') { // If element has an ID, use only the ID of the element selector = '#' + element.id; // To use this with jQuery, return a path once we have an ID // as it no need to look for more parents afterwards. //return selector + ' ' + path; } else if (classes.length > 0) { // If element has classes, use the element tag with the class names appended selector = tag + '.' + classes.replace(/ /g , "."); } else { // If element has neither, print tag with containing text appended (if any) selector = tag + ((innerText.length > 0) ? ":contains('" + innerText + "')" : ""); } path = ' ' + selector + path; } return path; }
+2
source

You will need to list all the parents of the element for which you want to create a query, and add a selector for each parent, for example. node parent name or name using test-test, if this test is necessary for this parent. The only way to make sure that this test test is necessary is to perhaps apply the current query to the current parent at each step and check if the query returns only the target. Then add test-test if it is too strong ...

I wrote a Greasemonkey script . First, it collects all the elements necessary to search for the target element in another tree ("template"), and then converts it into a query. However, it uses attributes (in particular, class / id / name) instead of text for matching and position if the attributes are not unique enough, since I think that in most cases the text changes more often than the structure.

0
source

The request is stupid as there is a much better way.

Either assign a unique identifier to an element to quickly refer to it later, or if an ID is already assigned, use it.

 // // generate a unique (enough) id for an element if necessary // function getUID(id) { if(window["uidCounter"]==null) window["uidCounter"]=0; return id||( (window["uidCounter"]++) + "_" + (new Date()).getTime() ); } // // use an #ID selector // $('a').click(function(){ var uid = getUID( $(this).attr('id') ); $(this).attr('id', uid); var selector = "#" + uid; });
0
source

Source: https://habr.com/ru/post/926524/

More articles:


All Articles