jQuery :has() Selector
The jQuery :has() selector in jQuery is used to select all elements that have one or more elements inside of them, that match the specified selector.
Syntax:
$(":has(selector)")
Parameter: This selector contains a single parameter selector which is mandatory and used to specify the element to select. It is also required to accept any kind of selector.
Example 1: This example uses:has selector to select <h2> span element to create a solid green border.
HTML
<!DOCTYPE html> < html > < head > < title >jQuery :has() Selector</ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > <!-- Script to use :has selector --> < script > $(document).ready(function () { $("h2:has(span)").css("border", "solid green"); }); </ script > </ head > < body > < center > < h1 id = "Beginner1" style = "color:green;" > w3wiki </ h1 > < h2 id = "Beginner2" > < span > jQuery :has() Selector </ span > </ h2 > </ center > </ body > </ html > |
Output:
Example 2: This example uses:has selector to select elements and create a border.
html
<!DOCTYPE html> < html > < head > < title >jQuery :has() Selector</ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > <!-- Script to use :has selector --> < script > $(document).ready(function () { $("body:has(h1, span)").css("border", "solid green"); }); </ script > </ head > < body > < center > < h1 id = "Beginner1" style = "color:green;" > w3wiki </ h1 > < h2 id = "Beginner2" > < span > jQuery :has() Selector </ span > </ h2 > </ center > </ body > </ html > |
Output:
Contact Us