Css selector closest element

CSS SCSS / CSS closest parent selector

The following tutorial shows you how to use CSS to do «CSS SCSS / CSS closest parent selector».

CSS Style

The CSS style to do «CSS SCSS / CSS closest parent selector» is

.v1>span < color:red; > .v2>span < color:blue; >

HTML Body

body >"v1"> span>Outside div >"v2"> span>Div 1 div >"v1"> span>Div 2 div >"v2"> span>Div 3     

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .v1 > span < color: red; >!-- ww w . d e m o 2 s .c o m --> .v2 > span < color: blue; >  body> body >"v1"> span>Outside div >"v2"> span>Div 1 div >"v1"> span>Div 2 div >"v2"> span>Div 3      

Related

• CSS Same css for multiple combinations of class selector
• CSS SASS breaks my selector
• CSS Sass: Extending nested selectors
• CSS SCSS / CSS closest parent selector
• CSS SCSS/CSS selector to select all input types
• CSS SCSS/CSS selector to select all input types (Demo 2)
• CSS SCSS/CSS Using :not selector for only certain elements

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Element: closest() method

The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.

Syntax

Parameters

A string of valid CSS selector to match the Element and its ancestors against.

Return value

The closest ancestor Element or itself, which matches the selectors . If there are no such element, null .

Exceptions

Thrown if the selectors is not a valid CSS selector.

Examples

HTML

article> div id="div-01"> Here is div-01 div id="div-02"> Here is div-02 div id="div-03">Here is div-03div> div> div> article> 

JavaScript

const el = document.getElementById("div-03"); // the closest ancestor with the id of "div-02" console.log(el.closest("#div-02")); // // the closest ancestor which is a div in a div console.log(el.closest("div div")); // // the closest ancestor which is a div and has a parent article console.log(el.closest("article > div")); // // the closest ancestor which is not a div console.log(el.closest(":not(div)")); // 

Specifications

Browser compatibility

BCD tables only load in the browser

Compatibility notes

• In Edge 15-18 document.createElement(tagName).closest(tagName) will return null if the element is not first connected (directly or indirectly) to the context object, for example the Document object in the case of the normal DOM.

See also

Found a content problem with this page?

This page was last modified on Jul 22, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Select closest element of certain type

jquery get closest form get closest element id jquery Question: I want to select an element with some selector, and the select the closest element to it (note that the p is not nested with the former element).

Select closest element of certain type

I want to select an element with some selector, and the select the closest

element to it (note that the p is not nested with the former element). How would I do that? I tried closest() , but that only works if the element is nested.

EDIT: a definition of closest:

 In this case, p#1 would be selected, assuming #myelement is the element in question.

 The reason closest() doesn't work is because:

Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.

Use next() instead if the ‘p’ tag will always be the next element:

However, if you could end up with any additional elements in-between the a and the first p tag than one of the ways to get it is to use nextAll()

There is many other ways to get that

element for you.

You can use either .siblings() or .next() in your case, but I believe .next would be the better choice if your data is always in the form you posted.

You’ll see that both of the above console logs report and id of 1 .

function findFirstParagraph() < var siblings = $('#myElement').siblings(); siblings.each(function(index) < if ( $(this).attr('id') == 1) < $(this).css('background-color', 'red'); >>); >​ 

You tried .next() or .prev().. Maybe use .eq(0)??

You can also use .parent() or .parents(‘.selector’)

How to find the closest element using jquery, How to find the closest element using jquery. I have searched in SO I found so many examples but mine was little different from all. 1) initially i have a row if the user click save & next button it will say you have 3 fields missing. 2) if the user click the addmore button and he did not type any value in the text field then … Code sample$(document).on(«change»,».cloned_field»,function()

JQuery select child of closest element

Basically I want to be able to select the div level2 parent from the child level4 div. My application does not has such classes, otherwise I’d just select level2 🙂

I start with $(‘#start’) and search for the first parent which is visible, but I’m not seeing a way to return the child of that parent. Searching for $(‘#start’) inside the parent seems very wasteful as I start with a sub child to begin with.

$('#start').closest(':visible') // returns level1 $('#start').closest(':visible').first() // returns the first level2. I can't just use second because the number of level2s can change. $('#start').closest(':visible').children().each(function()< /* do some search to check it contains `$('#start')` >) // seems very wasteful. 

Another way to look at what I’m trying to say would be; start in the middle, find the outside (the visible element), and move one element in.

$('#start').parentsUntil(':visible').last(); 

This will give you all hidden parent div’s until its visible parent and last() wil give the outermost parent which is hidden. last is not a selector on position it is the last() in the collection.

Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element .

$('#start').closest(':visible').children().has('#start'); 

You say that the classes don’t exist. why not add them? It would make thinks much easier to find. The class names don’t need to have actual styles associated.

var allLevel4 = $('#start').closest(':visible').find('.level4'); var firstLevel4 = $('#start').closest(':visible').find('.level4')[0]; var secondLevel4 = $('#start').closest(':visible').find('.level4')[1]; //also, #start 

$('#start').closest(':visible').children().filter(':first-child') 

.find() is also good for selecting pretty much anything.

Javascript — Select closest element of certain type, The reason closest () doesn’t work is because: Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree. Use next () instead if the ‘p’ tag will always be the next element: $ (‘#myelement’).next (); However, if you could end up with any additional elements …

JQuery :closest() CSS selector

Need a selector equivalent of function $.fn.closest() e.g.

$('.wrapper:eq(0)>h1>strong:closest(.wrapper)') 

implementation should return .wrapper element, which is the first on the page and contains h1 , which consequently contains strong element.

Actually, an example above is only an example. In real world, I need $.fn.draggable to set up a dynamic containment property.

UPDATE

To bring things more clear: there are (for ex.) tree wrappers div.wrapper on the page followed one by the other. Each wrapper is connected to sibling wrappers as a sortable area. Sortable items are div.sub-wrapper , and are placed over one of the wrappers, so, they can be moved to the other wrappers. Each sortable item has a child element div , which is the draggable element . What do I actually need is to set the draggable.options.containment of the latter to the very parent wrapper the latter (draggable) element currently located at by the moment. The main problem is that if I will register the containment like

then it won’t work correctly if I will move the div.sub-wrapper to the other div.wrapper — the containment element stays the same — an old one div.wrapper the draggable was previously located at.

I am thinking you want to use :has()

Based on your update, I suspect you need to initialize the draggables individually rather than as a set:

$("selector-for-your-draggables").each(function() < var $this = $(this); $this.draggable(< // . other options here. containment: $this.closest(".wrapper") // or .sub-wrapper, I couldn't // tell from the description >); >); 

You’ve talked about the parent it’s in «at the moment.» I can’t make out what you mean by that, but if the element you want the draggable contained to changes, you’ll need an «options» call to update containment when that happens.

JQuery closest() Method, The returned jQuery object contains zero or one element; parents() Begins with the parent element; Travels up the DOM tree and returns all ancestors that matches the passed expression; The returned jQuery object contains zero or more than one element; Other related methods: parent() — returns the direct parent element of …

Jquery select closests element

jquery get closest form

Источник

How to use the HTML closest() method

Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2023 with this popular free course.

Overview

In this shot, we will learn how to get the closest parent of an element with a specified CSS selector as a parameter.

We will use the closest() method, which will return us the closest parent element with the specified CSS selector passed as a parameter in the method.

Syntax

targetElement.closest(selectors) 

Parameters

selector : This is a DOMString containing a selector list.

Example

Let’s try to understand how this works. We will create two parents with the same class and check that only the closest parent is returned by the method closest() .

Code explanation

• In line 5, we have a CSS property for the class test , where we defined a property background color.
• In line 12, we have the first parent (grandparent) DIV element.
• In line 13, we have the first child DIV element of the above DIV element. It is the parent for the below div element.
• In line 14, we have the child element of the above div , which has an ID elem , which we will use to get the element object.
• In line 19, to get the DIV child element with id elem , we use document.getElementById() and store the object in the variable.
• In line 20, we use the method closest() with the class name .test , which returns the closest parent element with the class matching with .test .
• In line 21, we use the if condition, checking if the method closest() has returned the parent element or not. If true, then we apply the style property on the parent element.

Output

We have seen in the output that the grandparent and parent have a similar class test . The closest() method returns the first closest parent, not the grandparent, and the order style is only applied to the parent, not the grandparent.

Источник