Develop Reference

Make parent div cursor-pointer including child elements with inline styling?

I want to make an entire div cursor-pointer with inline CSS, but it currently only affects the whitespace around the child elements. I've tried position and z-index to no avail.
I do not and cannot have an external stylesheet.
<div className="cursor-pointer">
<checkbox>
<label>
</div>
Is there any way to do this without applying the cursor-pointer to every element? There's conditional logic as well so that would get pretty cluttered.

Since you allow the usage of JS, you could use querySelectorAll to select all child elements and apply the same class to it:
let el = document.querySelectorAll('.cursor-pointer *');
el.forEach(ele => ele.classList.add('cursor-pointer'));
/* just for demonstration purpose */
.cursor-pointer {
cursor: not-allowed;
}
<div class="cursor-pointer">
<input type="checkbox">
<label>Label</label>
</div>

Using javascript, this solution loops through the parent and children and applies the cursor directly to each element.
let pointers = document.querySelectorAll(".cursor-pointer");
pointers.forEach(function(el) {
let children = el.querySelectorAll("*");
children.forEach(function(c) {
c.style.cursor = "pointer";
});
el.style.cursor = "pointer";
});
<div class="cursor-pointer">
<input type="checkbox">
<label>A</label>
</div>

if data attribute is true, add class

I want buttons in a slider to get underlined when a slide is visible.
I think I need to check if a data attribute is true, and then add class.
When inspecting my webpage, I find this in properties > dataset: DOMStringMap > isactiveslide: "true"
I need to check if a slide has isactiveslide: "true" (or even data-isactiveslide: "true") and then add class.
I think I am close and have tried these two codes:
jQuery(function () {
if (jQuery('menu1').attr('isactiveslide') === true) {
jQuery(this).find("#test1").addClass("underline");
}
})
and
jQuery('menu1').each(function(){
if(jQuery(this).attr('isactiveslide')==true())
jQuery('#test1').addClass('underline');
})
EDIT (added after some great answers and questions)
And here is the section, where the data attribute "isactiveslide" occurs, copied from the page:
<rs-slide data-key="rs-1898" data-title="WORKS" data-in="o:0;" data-out="a:false;" class="menus works1" id="works1" data-originalindex="2" data-origindex="1" data-description="" data-sba="" data-scroll-based="false" style="overflow: hidden; height: 100%; width: 100%; z-index: 20; opacity: 1; visibility: inherit;" data-owidth="300" data-oheight="200" data-rspausetimeronce="0" data-isactiveslide="true"><
So, the next slide which is not yet shown has data-isactiveslide="false". I reckon, identifying "true" is how I can add class.
EDIT May 4th - I think I am close now, but it still does not work.
jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline');
any help is very appreciated!

Can be easily done by css:
You need to find the class applied on the active slide and button
rs-slide.menus[data-isactiveslide="true"] .button-class-name-here{
text-decoration:underline!important;
}
or
Find which slider you are using and on the slide change event of that slider apply the class on the button for styling.

Try this code:
var $ = document.querySelectorAll.bind(document) //No need for jquery - simply import the function
$(".menu1[data-is-active-slide]").forEach((el, index) => {
$("#test1")[index].classList.add('underline');
$("#test1")[index].innerText = "Selected!";
console.log(1);
})
<div class="menu1" data-is-active-slide='true'>1</div>
<div id="test1"></div>
<div class="menu1" data-is-active-slide='false'>2</div>
<div id="test1"></div>
<div class="menu1">3</div>
<div class="menu2" data-is-active-slide='false'>4</div>
<div class="menu2">5</div>
<div class="menu1" data-is-active-slide>6</div>
<div id="test1"></div>
<div class="menu2">7</div>
<div class="menu1 menu2" data-is-active-slide="true">8</div>
<div id="test1"></div>
<div class="menu1 menu2">9</div>
The beginning declaration of $ is simply defining it since I did not import jQuery.
The next part is where the 'fun' begins. I used $(".menu1[data-is-active-slide]") to select all elements with class menu1 and with the property that data-is-active-slide is present. Then, I simply defined an action inside the function, for the sake of demonstrating that it works.

How can I check if elements with a certain ID are clicked?

So I have the following divs
<div id="az" class="d_1" value="data1"></div>
<div id="az" class="d_2" value="data2"></div>
<div id="by" class="d_3" value="data3"></div>
<div id="az" class="d_4" value="data4"></div>
how can I check only if az divs are clicked without adding onClick="reply_click(this)" to every div?

Delegation is what you want after swapping ID and class and using data attributes because IDs need to be unique and DIVs do not have value
window.addEventListener("load",function(){ // on page load
document.getElementById("container").addEventListener("click",function(e) { // clicking anything in container
const tgt = e.target; // the event target (what was clicked)
if (tgt.classList.contains("az")) { // ignore click on "by"
console.log("az clicked", tgt.dataset.value)
}
})
})
<div id="container">
<div class="az" id="d_1" data-value="data1">D1</div>
<div class="az" id="d_2" data-value="data2">D2</div>
<div class="by" id="d_3" data-value="data3">D3</div>
<div class="az" id="d_4" data-value="data4">D4</div>
</div>

id attribute must always be unique:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
You have your class and id attributes structured the opposite of what they should be. class can be non-unique to refer to a group of elements.
Below is a sample of how you can use addEventListener and the class css selector to achieve what you asked for.
function reply_click(){
console.log(this.getAttribute('value'));
}
document.getElementsByClassName('az').forEach( el => el.addEventListener('click',reply_click) );
<div class="az" id="d_1" value="data1">1</div>
<div class="az" id="d_2" value="data2">2</div>
<div class="by" id="d_3" value="data3">3</div>
<div class="az" id="d_4" value="data4">4</div>

Dynamically add attribute to css class instead of element

I recently came across this scenario where I wanted to add css property to a class instead of an element.
When i do this
$('.class_with_css').css({display:'none'});
It would add the style "display:none" to all the elements that has the class "class_with_css" currently.
But in my case I had to apply "class_with_css" class to a new element after the above code was executed and want to retain this style addition. Is there a way to do this (something like add the property to the css class itself) without recalling the above function?
Eg.
two elements
<div id=1 class="abc" ></div>
<div id=2 class="abc" ></div>
Run the code
$('.abc').css({display:'none'});
The element becomes:
<div id=1 class="abc" style="display: none;" ></div>
<div id=2 class="abc" style="display: none;" ></div>
Now i add class abc to element like this
<div id=3 class="abc" ></div>
Is there a way to make class "abc" to hold the style instead of element so that step 4's element also has display:none

No, there is no way to achieve what you want directly. The way it usually is done by already having css class with desired changes/properties and applying that class instead of css property.
So, you will have for example:
.hide {
display: none
}
and add the class to elements:
$('.abc').addClass('hide');
UPDATE
Another option if you really want to dynamically add css class, would be the answer posted here

You can inject style to your header.
BUT REMEMBER From that point on. You have to use display: block; to show it. Otherwise the default style will be display: none; until you refresh the page.
Inject() is injecting style to your header
Add() is adding "abc" class to your other divs
Showme() is adding "display: block" to ".abc"
Hideme() is adding "display: none" to ".abc"
function Inject(){
$('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
$("#w").addClass("abc");
$("#z").addClass("abc");
}
function Showme() {
$(".abc").css("display","block");
}
function Hideme() {
$(".abc").css("display","none");
}
button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>

jQuery check divs has a class and unwrap if no other class

I have two div's and what I am trying to do is loop through all the divs to check if the div has a class jsn-bootstrap3, I'm also trying to check to see if the div has any other classes, if it doesn't then I'd like to remove the jsn-bootstrap3 div so that the child content is whats left.
<div class="jsn-bootstrap3">
<div class="wrapper">
Div one
</div>
</div>
<div class="jsn-bootstrap3 block">
<div class="wrapper">
Div two
</div>
</div>
$('div').each(function() {
if ($(this).hasClass()) {
console.log($(this));
var class_name = $(this).attr('jsn-bootstrap3');
console.log(class_name);
}
});
jsFiddle

You can try something like
$('div.jsn-bootstrap3').removeClass('jsn-bootstrap3').filter(function () {
return $.trim(this.className.replace('jsn-bootstrap3', '')) == ''
}).contents().unwrap();
Demo: Fiddle
use the class selector to find div's with class jsn-bootstrap3 because we are not goint to do anything with others
use filter() to filter out div's with any other class
use unwrap() with contents() to remove the wrapping div