How to get the child of a parent div element

How to get the child of a parent div element - javascript

If I have a DOM structure like the following:
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
I could technically use normal css, but it is not flexible enough.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
In this case, my first aproach of using parent made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.

You can go up the chain, and you can also go back down the chain. This way the selectors stay within the "this" element.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(this).parents(".parent").find('.child-b').css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>

IMO you have way to much jQuery and aren't using any of the power of css.
$(function() {
$(".child").click(function() {
// reset
$('.parents .selected').removeClass('selected');
var $child = $(this);
var $subParent = $(this).closest('.sub-parent');
$child.addClass('selected');
$subParent.addClass('selected');
});
});
div{
padding: 5px;
}
.sub-parent.selected {
background-color: red;
}
.child{
cursor: pointer;
}
.child.selected {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parents">Parents
<div class="parent">- Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
<div class="parent">- Sub Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
</div>

Related

How do I toggle the background colors within a list of divs?

From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!

You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>

seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>

Reorder divs with CSS? Insert parent 1 between children of parent 2

This is what I have:
<div class="container>
<div class="parent1"></div>
<div class="parent2">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
This is what I want:
<div class="container>
<div class="parent2">
<div class="child1"></div>
<div class="parent1"></div>
<div class="child2"></div>
</div>
</div>
Is this possible with only CSS or JavaScript (no jQuery)?
Even if the HTML doesn't move, as long as they appear in that order on the page that would be perfect.

You can do it with Javascript: document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
Demo:
function reorder() {
document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}
.container * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.parent1 {
color: red;
border-color: red;
}
.child1 {
color: blue;
border-color: blue;
}
<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
I'm parent 2!
<div class="child1 ">I'm child 1!</div>
<div class="child2 ">I'm child 2!</div>
</div>
</div>
<button onclick='reorder();'>Reorder!</button>
Note: Css is only for better looks

With Javascript:
//Remove the parent 1 div from the container div
document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);
//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));

To make this work, I would advise that you remove the div.parent2 around the child classes.
Therefore the code becomes
<div class="container parent">
<div clas="parent1"></div>
<div class="child1"></div>
<div class="child2></div>
</div>
then you can use flexbox to do this
.parent{display: flex};
.child1{order:1}
.parent1{order:2}

change div1 on hover over div2 which is under div1

Is it possible to change div1 if div2 is hovered but under div1?
/* Works */
.div1:hover + .div2 {
background-color: red;
}
/* Doesn't Work */
.div2:hover + .div1,
.div2:hover ~ .div1,
.div2:hover .div1 {
background-color: red;
}
<div class="div1">hover</div>
<div class="div2">hover</div>
Solutions using Javascript and/or JQuery are also appreciated

Using JQuery's .hover() + .css() for both the divs
$( ".div1" ).hover(
function() {
$(".div2").css( "background-color", "red" );
}, function() {
$(".div2").css( "background-color", "initial" );
}
);
$( ".div2" ).hover(
function() {
$(".div1").css( "background-color", "red" );
}, function() {
$(".div1").css( "background-color", "initial" );
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

If you don't want to use javascript, you can use display: flex on the container, then change the rendering order (note that the html order has to be updated as well). Then you can hover on div2 and highlight div1.
.container {
display: flex;
flex-wrap: wrap;
}
.div1, .div2 {
flex: 0 0 100%;
}
.div1 { order: 1; }
.div2 { order: 2; }
.div2:hover ~ .div1 {
background-color: red;
}
<div class="container">
<div class="div2">hover 2</div>
<div class="div1">hover 1</div>
</div>

Nope, the CSS does not provide a provide a previous sibling selector, the only solution is using JS. You can use jquery's prev() method for the same.
$(function() {
$(".div2").hover(function() {
$(this).prev().addClass("hoveredBg");
},
function() {
$(this).prev().removeClass("hoveredBg");
});
});
.hoveredBg {
background-color: red;
}
<div class="div1">div 1 hover</div>
<div class="div2">div 2 hover</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This will only help your hover for the previous sibling div only and not burden the browser for next sibling hover, which can be achieved using CSS only.

Try this below code.
$(document).ready(function() {
$(".div2").mouseover(function() {
$(".div1").css("background-color", "red");
});
$(".div2").mouseout(function() {
$(".div1").css("background-color", "");
});
});
/* Works */
.div1:hover+.div2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>
Hope this will help you.

Check out this fiddle,
https://jsfiddle.net/rkqhvzyc/
$(document).ready(function() {
$(".div2").hover(function(){
$('.div1').css("background-color", "red");
}, function(){
$('.div1').css("background-color", "white");
});
});
/* Works */
.div1:hover + .div2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>

Interesting how nobody pointed out that classes are multiple on a single page,
and no, you should not target .div1 just like that, like many suggested, and expect that all other .div1 in the DOM will not be targeted as-well.
// NONSENSE
$( ".div2" ).hover(
function() {
$(".div1").css( "background-color", "red" );
}, function() {
$(".div1").css( "background-color", "initial" );
}
);
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To reflect the above-mentioned problem - here's a couple of solutions:
// 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)
$(".hoverTargetPrev").hover(function() {
$(this).prev(".div1").toggleClass("red");
});
// 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find()
$(".div2").hover(function() {
$(this).closest(".couple").find(".div1").toggleClass("red");
});
// 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)
$(".hoverTargetNearestPrev").hover(function() {
$(this).prevAll(".div1").eq(0).toggleClass("red");
});
.div2 {color:red;}
.red {background: red;}
<h3> 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetPrev">DIV2 hover me (will not work any more)</div>
<h3> 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find() </h3>
<div class="couple">
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2">DIV2 hover me (will kork!)</div>
</div>
<h3> 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me (will work!!)</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Select first div not in class name using jQuery

hello How do you find element not in this class name?
drop-area__itemPage
I use this but not working
$("#drop-area").children("div").find(".drop-area__item:not('.drop-area__itemPage:first')")
$("#drop-area").children("div").find(".drop-area__item")
div#page1.drop-area__item.ui-droppable.drop-area__itemPage
div#page2.drop-area__item.ui-droppable.ui-droppable-active
div#page3.drop-area__item.ui-droppable.ui-droppable-active
div#page4.drop-area__item.ui-droppable.ui-droppable-active
div#page5.drop-area__item.ui-droppable.ui-droppable-active
div#page6.drop-area__item.ui-droppable.ui-droppable-active
div#page7.drop-area__item.ui-droppable.ui-droppable-active
div#page8.drop-area__item.ui-droppable.ui-droppable-active
div#page9.drop-area__item.ui-droppable.ui-droppable-active
enter code here

Here is a snippet showing selection of first child which has one class and do not has another one:
$("#drop_area").find("div.class1:not([class~='class3']):first").css("border", "5px blue solid");
.class1, .class2, .class3{
display: inline-block;
margin: 20px;
width: 150px;
height: 80px;
}
.class1 {
background: teal;
}
.class2 {
background: tomato;
}
.class3 {
background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop_area">
<div class="class1 class3 class2">class1 class3 class2</div>
<div class="class2">class2</div>
<div class="class1 class2">class1 class2</div>
<div class="class3 class1">class3 class1</div>
<div class="class1">class1</div>
<div class="class2">class2</div>
<div class="class1 class2">class1 class2</div>
<div class="class3 class1">class3 class1</div>
<div class="class3">class3</div>
<div class="class2">class2</div>
<div class="class3 class2">class3 class2</div>
<div class="class3 class1">class3 class1</div>
</div>
<div class="result"></div>
So result jquery statement looks like:
$("#drop-area .drop-area__item:not('.drop-area__itemPage'):first")

First select all related elements, than exclude with class .drop-area__itemPage and than use .eq(0) to select first of them:
$('#drop-area div .drop-area__item.:not(.drop-area__itemPage)').eq(0);

I'm taking a bit of a guess at what you're trying to do, but if you want to find the first child div of drop-area that does not have the class drop-area__itemPage, you can do this:
$(function() {
$("#drop-area").find(".drop-area__item").not('.drop-area__itemPage').first().css({
'color': 'red'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop-area">
<div id="page1" class=".drop-area__item ui-droppable drop-area__itemPage">1</div>
<div id="page2" class="drop-area__item ui-droppable ui-droppable-active">2</div>
<div id="page3" class="drop-area__item ui-droppable ui-droppable-active">3</div>
</div>

How to create javascript function for hovering 3 or 4 element at a time

I want to hover 3 item at a time. when i will put cursor one of them. It should hover other two item.
please can help me anyone. i want to do this with javascript. I have make a model but it is not good. i want to use with function so i can use this again and again. please help me.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.boxes {
float: left;
display: inline;
width:150px;
height:100px
}
.box1 {
width:50px;
padding:10px;
border:1px solid gray;
margin:0px;
height: 20px;
}
.box4 {
display: inline-block;
width:150px;
padding:10px;
border:1px solid gray;
height: 100px;
}
</style>
<script>
$(document).ready(function(){
// box 1
$('.box1').mouseover(function(){
$('.box1').css('background-color', '#F7FE2E');
$('.box4').css('background-color', '#F7FE2E');
$('.hov').css('color', '#0f0');
});
$('.box1').mouseout(function(){
$('.box1').css('background-color', '#FFF');
$('.box4').css('background-color', '#FFF');
$('.hov').css('color', '#fff');
});
$('.box4').mouseover(function(){
$('.box4').css('background-color', '#F7FE2E');
$('.box1').css('background-color', '#F7FE2E');
$('.hov').css('color', '#0f0');
});
$('.box4').mouseout(function(){
$('.box4').css('background-color', '#FFF');
$('.box1').css('background-color', '#FFF');
$('.hov').css('color', '#fff');
});
});
</script>
</head>
<div class="boxes">
<div class="box1">Box 1</div>
</div>
<div class="box4">box4 </div>
<br/>
<div class="boxes">
<div class="box1">Box 1</div>
</div>
<div class="box4">box4 </div>
</body>
</html>

If you group your divs by parent divs, you can use the HTML structure to determine what to highlight. I don't know your exact usage model, but something like this:
<div class="boxgroup">
<div class="box1 hover"></div>
<div class="box2 hover">Link</div>
</div>
<div class="boxgroup">
<div class="box1 hover"></div>
<div class="box2 hover">Link</div>
</div>
And then in your jQuery:
$(document).on('mouseover', '.hover', function () {
var boxgroup = $(this).closest('.boxgroup');
boxgroup.find('.hover').addClass('hovercolor');
boxgroup.find('.hov').css('color', '#0f0');
}).on('mouseout', '.hover', function () {
var boxgroup = $(this).closest('.boxgroup');
boxgroup.find('.hover').removeClass('hovercolor');
boxgroup.find('.hov').css('color', '#000');
});
Here, I use .closest() to find what group the div is in, and then highlight all of the other .hover items in that group.
Example:
http://jsfiddle.net/jtbowden/HZtVP/3/
If you want your divs to not be physically grouped, there are other ways to do what you want.

use a mapping javascript object.
and use class 'like' selector to bind functions to elements which have class starting with ".box"
eg :
$(document).ready(function(){
var mapping = { 'box1':'box4','box4':'box1' };
$("[class^=box]").mouseover(function(){
.........
});

Develop Reference

JavaScript is the programming language of the Web.

How to get the child of a parent div element - javascript

Related

How do I toggle the background colors within a list of divs?

Reorder divs with CSS? Insert parent 1 between children of parent 2

change div1 on hover over div2 which is under div1

Select first div not in class name using jQuery

How to create javascript function for hovering 3 or 4 element at a time

Categories

Resources