Skip to content

Instantly share code, notes, and snippets.

@sardinecan

sardinecan/hasChild selector with JS

Created April 30, 2019 14:41
Show Gist options
  • Save sardinecan/f8370b41a93582e8218d7731e79fb43f to your computer and use it in GitHub Desktop.
Save sardinecan/f8370b41a93582e8218d7731e79fb43f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/tehijot
Raw
hasChild selector with JS
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="hasChild selector with JS">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.color {
color:red;
}
</style>
</head>
<body>
<button onclick="hasChild()">change color</button>
<div id="title">
<h1>This is a h1 element.</span>
</div>
<div class="solo">
<span>This is a span element.</span>
</div>
<div class="solo">
<span class="span">This is a span we want red on click.</span>
</div>
<div class="group">
<span>This is a span element.</span>
</div>
<script id="jsbin-javascript">
function hasChild() {
var element = document.querySelectorAll('div.solo');
for (var i = 0; i < element.length; i++) {
if (element[i].querySelectorAll('span.span').length > 0) {
element[i].classList.add('color');
}
}
}
</script>
<script id="jsbin-source-css" type="text/css">.color {
color:red;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">function hasChild() {
var element = document.querySelectorAll('div.solo');
for (var i = 0; i < element.length; i++) {
if (element[i].querySelectorAll('span.span').length > 0) {
element[i].classList.add('color');
}
}
}</script></body>
</html>
Raw
jsbin.tehijot.css
.color {
color:red;
}
Raw
jsbin.tehijot.js
function hasChild() {
var element = document.querySelectorAll('div.solo');
for (var i = 0; i < element.length; i++) {
if (element[i].querySelectorAll('span.span').length > 0) {
element[i].classList.add('color');
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment