On click except one child with class + use of this

On click except one child with class + use of this - javascript

I was wondering how I could define a click event in jQuery / JavaScript which excludes children with a specific class. In the same time I need to use "this" to access the clicked element.
$(".slidebox-header *:not(.stop)").click(function(event) {
alert("woohoo!");
$(this).siblings(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
But because "this" refers to the children of ".slidebox-header", it is not working.
My question: Is there an elegant way to solve this issue?
Thanks a lot!

slidebox-content is a sibling of slidebox-header, so use .closest() to traverse to to header then use .sibling()
$(".slidebox-header *:not(.stop)").click(function(event) {
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
Also you can use descendant selector to target the specific child.
$(".slidebox-header > span").click(function(event) {
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header *:not(.stop)").click(function(event) {
//alert("woohoo!");
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
Or you could bind event with header and use event.stopPropagation() with block element to stop event bubbling.
$(".slidebox-header").click(function(event) {
$(this).siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header .stop").click(function(event) {
event.stopPropagation();
});
$(".slidebox-header").click(function(event) {
$(this).siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header .stop").click(function(event) {
event.stopPropagation();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>

You can use parents() or closest() to achieve this. Below is the usage of parents():
$(".slidebox-header *:not(.stop)").click(function(event) {
alert("woohoo!");
$(this).parents(".slidebox:first").find(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>

Related

How to select div without other div

I want to be able to click on a div, but not in the area of another div inside a div inside the outer div.
I tried to select my other div without the inner div using :not() in the selector, but it didn't work.
<div class=outer>
<div class=inner1>
<div class=inner2>
<div class=notClickable>
<div class=alsoNotClickable>
...
</div>
</div>
</div>
</div>
</div>
$("div.outer:not(div.notClickable)").click(function(){
...
});
I expect that I can click inside div class=outer, but not inside div class=notClickable and its childs.

One option is adding stopPropagation() on the non clickable divs.
The stopPropagation() method of the Event interface prevents further
propagation of the current event in the capturing and bubbling phases.
$("div.outer").click(function() {
console.log("click");
});
$("div.notClickable").click(function(e) {
e.stopPropagation();
});
$("div.alsoNotClickable").click(function(e) {
e.stopPropagation();
});
.outer {
width: 300px;
height: 300px;
background-color: green;
}
.notClickable {
width: 100px;
height: 100px;
background-color: red;
}
.alsoNotClickable {
width: 50px;
height: 50px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=outer>
<div class=inner1>
<div class=inner2>
<div class=notClickable>
<div class=alsoNotClickable>
</div>
</div>
</div>
</div>
</div>

To achieve this you can check the target property of the event. If it matches the element you hooked the event to then you know that the event has not bubbled up from a child. Try this:
$("div.outer").click(function(e) {
if ($(e.target).is('div.outer')) {
console.log('You clicked the outer div');
} else {
console.log('You clicked a child div');
}
});
div.outer,
div.outer div {
padding: 10px;
border: 1px solid #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
Outer
<div class="inner1">
Child
<div class="inner2">
Child
<div class="notClickable">
Child
<div class="alsoNotClickable">
Child
</div>
</div>
</div>
</div>
</div>

I think you can stop the propagation by adding this line to your function:
event.stopPropagation();
Eg:
$("div.outer:not(div.notClickable)").click(function(event) {
...
event.stopPropagation();
});

Please check this fiddle where i use the click function. Let me know if that would fits you :)

Assign an ID to the div you want to select. Then select the ID.

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 get the child of a parent div element

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>

How to not enable toggle class at first?

$(document).ready(function(){
$("#summary").click(function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div class="clicked">111</div>
<div class="clicked">222</div>
</div>
How to not set beckoned-color to red when html page load.Only change it to red when click on its div?

Remove class="clicked" from your divs?
$(document).ready(function(){
$("#summary").click(function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div>111</div>
<div>222</div>
</div>

You have already added the .clicked to the divs when your page is loading, while you want to toggle the class by clicking on the div. Try the below code:
$(function(){
$(document).on('click', '#summary', function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div class="someclass">111</div>
<div class="someclass">222</div>
</div>

Just remove the inline class clicked from the div tags
HTML CODE:
<div id="summary">
<div >111</div>
<div >222</div>
</div>
Live demo # JSFiddle:http://jsfiddle.net/dreamweiver/qjrahp6t/

Remove class clicked from the HTML. It will become red only after the click.
<div id="summary">
<div class="">111</div>
<div class="">222</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

On click except one child with class + use of this - javascript

Related

How to select div without other div

change div1 on hover over div2 which is under div1

Select first div not in class name using jQuery

How to get the child of a parent div element

How to not enable toggle class at first?

Categories

Resources