How do I select the innermost element?

Asked
Active3 hr before
Viewed126 times

8 Answers

elementselect
90%

For single path just find the element that doesn't have child nodes:,Or, in your more specific case $('#cell0 *:not(:has("*"))');,(related but bonus: how do I find the deepest element with multiple downward paths?),Well, starting from a basis that you have no idea where this "deepest" node is, you could do something like this:

For single path just find the element that doesn't have child nodes:

$('body *:not(:has("*"))');

For multiple paths - what if there are multiple equally nested nodes? This solution will give you an array of all nodes with highest number of ancestors.

var all = $('body *:not(:has("*"))'),
   maxDepth = 0,
   deepest = [];
all.each(function() {
   var depth = $(this).parents().length || 0;
   if (depth > maxDepth) {
      deepest = [this];
      maxDepth = depth;
   } else if (depth == maxDepth) {
      deepest.push(this);
   }
});

Again, in your situation you probably want to get to table cells' deepest elements, so you're back to a one-liner:

$('#table0 td *:not(:has("*"))');
load more v
88%

I want to change the innermost HTML of the cell named cell0 but I don't necessarily know the names of all the classes inside. Is it possible to select this far without knowing these names?,Use jQuery .siblings() to select the matching sibling.,You can get around the support limitations by binding the load element to the same function, as it will trigger on those.,- this will return a jQuery object containing all the innermost child nodes of every cell in your table.

(related but bonus: how do I find the deepest element with multiple downward paths?)

<html>
<table id="table0">
   <tr>
      <td id="cell0">
         <div class"simple"> I want to change this information </div>
      </td>
   </tr>
</table>

</html>
load more v
72%

Available documents: ,/TR/2011/REC-CSS2-20110607/selector.html (common basename)

65%

Document document;document.getElementsByTag("img"),Element element;element.getElementsByTag("a"),Element element;element.children(),selectFind matching elements within this element list.

private void myMethod() {
   Elements e = Element element;
   element.children() Document document;
   document.getElementsByTag("img") Element element;
   element.getElementsByTag("a") Smart code suggestions by Tabnine
}
75%

Note that :contains and :has are non-standard selectors that are available in jQuery's selector engine only. You can't use them in other libraries that match CSS selectors, such as Nokogiri or Capybara.,What you need to do instead is to find all elements containing "hello" which don't have a descendant containing "hello":,Unfortunately that returns a lot more elements than you expect:, Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Let's say you want to find the element with the text hello in the following DOM tree:

Copy<html>

<body>
   <article>
      <strong>hello</strong>
      <strong>world</strong>
   </article>
</body>

</html>
load more v
40%

If the source document contains nested sections represented by div elements, the expression innermost(//div) returns those div elements that do not contain further div elements.,Returns every node within the input sequence that is not an ancestor of another member of the input sequence; the nodes are returned in document order with duplicates eliminated.,That is, the function takes as input a sequence of nodes, and returns every node within the sequence that is not an ancestor of another node within the sequence; the nodes are returned in document order with duplicates eliminated.,The effect of the function call fn:innermost($nodes) is defined to be equivalent to the result of the expression:

The effect of the function call fn:innermost($nodes) is defined to be equivalent to the result of the expression:

$nodes except $nodes / ancestor::node()
22%

Description: Attach an event handler function for one or more events to the selected elements.,Attach multiple events—one on mouseenter and one on mouseleave to the same element:, data Type: Anything Data to be passed to the handler in event.data when an event occurs. ,If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

$("#dataTable tbody tr").on("click", function() {
   console.log($(this).text());
});
load more v
60%

The jQuery selector enables you to find DOM elements in your web page. Most of the times you will start with selector function $() in the jQuery. , In this section, you will learn about jQuery selectors and how to find DOM element(s) using selectors. , jQuery provides number of ways to select a specific DOM element(s). The following table lists the most important selector patterns. ,The context parameter is optional. It specifies elements in a DOM hierarchy from where jQuery starts searching for matching elements.

$(selector expression, context)

jQuery(selector expression, context)
load more v

Other "element-select" queries related to "How do I select the innermost element?"