Develop Reference

Jquery: Give styling (padding) of the parent class based on the condition that the first child matches with the class I want

Parent Class: cmp-container
There are two child classes -
productmodelfootnotes
footnotes
According to the sequence of the child I want to give padding as follows -
If "productmodelfootnotes" child class comes first -> Apply padding=40px to the parent class (cmp-container)
If "footnotes" child class comes first -> Apply padding=64px to the parent class (cmp-container)

First of all, initialize your parent element
let parent = document.querySelector('.cmp-container')
Then add style, based on condition
let firstChild = parent.children[0];
if(firstChild.classlist.contains('productmodelfootnotes'){
parent.style.padding = "40px";
} else if(firstChild.classlist.contains('footnotes')) {
parent.style.padding = "64px";
}

Consider the following.
$(function() {
$(".cmp-container").each(function(i, el) {
if ($("div:eq(0)", el).hasClass("productmodelfootnotes")) {
$(el).addClass("shortpad");
} else if ($("div:eq(0)", el).hasClass("footnotes")) {
$(el).addClass("longpad");
}
});
});
.cmp-container {
border: 1px solid blue;
margin-bottom: -1px;
}
.cmp-container .footnotes {
border: 1px solid red;
}
.cmp-container .productmodelfootnotes {
border: 1px solid green;
}
.shortpad {
padding: 40px;
}
.longpad {
padding: 64px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cmp-container">
<div class="productmodelfootnotes">
Product Note 1
</div>
<div class="footnotes">
Foot Note 1
</div>
</div>
<div class="cmp-container">
<div class="footnotes">
Foot Note 2
</div>
</div>
<div class="cmp-container">
<div class="productmodelfootnotes">
Product Note 3
</div>
<div class="footnotes">
Foot Note 3
</div>
</div>
<div class="cmp-container">
<div class="footnotes">
Foot Note 4
</div>
<div class="productmodelfootnotes">
Product Note 4
</div>
</div>
Using .each(), we can iterate over the DIV elements and check the order of the children. If they meet the specific condition, we can add a Class or apply a Style to that element.
See More: https://api.jquery.com/each/
I assign i as the Index and el as the Element. I then use a Find selector, $("div:eq(0)", el) which is the same as $(el).find("div").eq(0) where 0 represents the first item in the list or elements that is Found.
Using .hasClass() we can check if it is true or false, and perform a specific action based on the condition.
See More: https://api.jquery.com/hasClass/
I used an if / else if statement to check two conditions. This is in case another element may appear first that should not have any padding.

Jquery selector - how can I ensure this works?

I have some buttons, labelled logo1 - logo15 respectively.
There is another button called 'lets-go' that fires a function based on these buttons being selected - when you click a logo the class 'active'.
When there is no logo selected, I would like this button to not be in the DOM - and be hidden. At the moment, the 'active' class for the button brings it's opacity to 1.
I have this jquery statement at the moment.
if (!$('.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15').hasClass("active")) {
$('#lets-go').removeClass('active')};
But it's not working.
This is an example of one of my logoX buttons:
$('.logo15').on('click', function(e) {
$('.logo15').toggleClass("active");
$('#b15').toggleClass('alive');
$('#b15').toggleClass('zoomTarget');
$('#b15').toggleClass('dead');
$('#lets-go').addClass('active');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
On click, they apply the class of 'active' to let's go. But it doesn't remove it, ever. Just if you click any of the 15 buttons a new button appears, but if you deselect the button it's still there - and then the next screen is blank.
Can you see why it's not?
I am basically looking for: If none of these classes have the class of active, then make sure this id doesn't have the class of active either.

Consider the following:
if (!$("[class*='logo']").hasClass("active")) {
$('#lets-go').removeClass('active')};
}
This looks at the Class attribute for a item starting with "logo", so .logo3 would be one of those elements. But you may want to test each one.
$("[class*='logo']").each(function(i, el){
if(!$(el).hasClass("active")){
$('#lets-go').removeClass('active')};
}
});
See More:
https://api.jquery.com/attribute-contains-selector/
https://api.jquery.com/each/#each-function
You can also use simplified classes to help group selectors. Consider the following.
$(function() {
$(".logo").click(function() {
$(".logo.active").removeClass("active");
$(this).addClass("active");
$("#letsgo").prop("disabled", false);
});
$("#letsgo").prop("disabled", true);
})
.logo {
padding: .4em;
border: 1px solid black;
border-radius: 3px;
margin: 3px;
background: #eee;
color: #999;
}
.active {
background: white;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Make a Selection</p>
<div class="logo item-1">Logo 1</div>
<div class="logo item-2">Logo 2</div>
<div class="logo item-3">Logo 3</div>
<div class="logo item-4">Logo 4</div>
<div class="logo item-5">Logo 5</div>
<button id="letsgo">Let's Go!</button>

How to detect the ordered position of a class element

Detecting the name of a class is straightforward.
event.target.className
However detecting if a given element is the 3rd, 5th or 11th that uses a particular class is tough, at least for me. I used the console (F12) to find a property I could use but no luck.
In the following simplified example what property or other feature can determine if the user clicked ("box-a")[0] ("box-a")[1] ("box-a")[2] or ("box-a")[3]? I know that I can use individual IDs for each element but I'd rather keep this simple if it is technically possible.
var count;
for (count = 0; count < 4; count++) {
document.getElementsByClassName("box-a")[count].addEventListener("click", checker);
}
function checker() {
document.getElementsByClassName("box-b")[0].innerHTML = event.target.className;
}
// event.target.className targets the classes name, but what property targets the [0], [1], [2] or [3]?
.box-a {
background-color: green;
border: 0.6rem solid black;
padding: 10px;
font-family: arial;
font-size: 4rem;
}
.box-b {
display: block;
background-color: blue;
border: .25rem solid red;
padding: 10px;
font-family: arial;
font-size: 4rem;
}
<div class="box-a">Box 1</div>
<div class="box-a">Box 2</div>
<div class="box-a">Box 3</div>
<div class="box-a">Box 4</div>
<div class="box-b"></div>

When looping over the elements, add an event listener to each box that passes the index of the clicked box to your checker function.
function checker(index) {
// Do whatever you want with the index here
console.log(index)
}
// Add the same event listener to each element, but passing the index of
// the element to the checker function
[].slice.call(document.getElementsByClassName('box-a'))
.forEach(function(element, index) {
element.addEventListener('click', function() { checker(index) })
})
<div class="box-a">Box 1</div>
<div class="box-a">Box 2</div>
<div class="box-a">Box 3</div>
<div class="box-a">Box 4</div>
<div class="box-a">Box 5</div>

This may be not the best solution but it works.
// Click on any div element and see the output
document.querySelectorAll('.box-a').forEach((e) => { // Add the event listener to all the elements with class .box-a
e.addEventListener('click', (event) => {
var element = event.target;
var index = Array.from(element
.parentNode // Get the parent node of the clicked element
.querySelectorAll('.' + element.className)) // Select all the elements inside the parent node (siblings) with the same class name of the clicked element
.indexOf(element) + 1; // Look for the index of the clicked element, + 1
console.log(index);
});
});
Here's a working bin:
JSBin

HTML and Javascript - Detecting which div box was clicked?

If I have multiple div boxes lined up (not overlapping), how can I detect which box is clicked?
For example, here is pseudocode:
HTML:
<div id="box1" onClick="clicked()">Box 1</div>
<div id="box2" onClick="clicked()">Box 2</div>
<div id="box3" onclick="clicked()">Box 3</div>
JS:
function clicked(){
var first="box1";
var second="box2";
var third="box3";
if (the div id of what you clicked is equal to first)
/*do something here*/
if (the div id of what you clicked is equal to second)
/*do something here*/
etc
etc
}
My main problem is that I don't know how to properly write the if statement. I'm not sure how to get the div's id that you clicked in JavaScript. I'm thinking of something like this:
if (document.getElementById() = first)
/*do stuff*/
I'm aware that I can solve this problem by having three different functions such as clicked1(), clicked2(), and clicked3(), but I would prefer not to have so many functions.
Any help is appreciated, thank you.

Pure Javascript has a built in target in the event object. This is basically the opposite of getElementById, its basically getIdByElement(though this method doesn't exist). To access it all you need to do is edit your HTML from onClick="clicked()" to onClick="clicked(event)" and change your clicked function into code similar to this:
function clicked(event) {
var id = event.target.id,
first = 'box1',
second = 'box2',
third = 'box3';
if(id === first) {
...
} else if(id === second) {
...
} else if(id === third) {
...
}
}
To explain why this works, when a JavaScript event is fired you get an object about it, it looks like this:
This is so that you can get certain details about what happened. In this case, you wanted the target id. This works by selecting all divs on the page. Also to shorten the code if you want, you can pass in this instead and do this.id. Such as:
function clicked(reference) { //pass in this instead of event
let id = reference.id;
...
}
Here is an example of it in work:
function clicked(event) {
let p = document.getElementById('clicked-item')
p.textContent = event.target.id + ' clicked';
}
<div id="box1" onClick="clicked(event)">Box 1</div>
<div id="box2" onClick="clicked(event)">Box 2</div>
<div id="box3" onclick="clicked(event)">Box 3</div>
<p id="clicked-item">none clicked</p>
It is a good idea to separate HTML and JS(though not 100% necessary). So to remove the onClick attribute on each element do something like this:
let selector = document.getElementsByTagName('div')
for(let element of selector) {
element.addEventListener('click', function(event) {
clicked(event);
});
}
The code starts by getting all elements that are a div with getElementsByTagName, though you can use other selectors too. Then using a for loop we loop through all the divs and add an onClick event running clicked.

You could make this work using inline event handlers but it'd be better to move your binding code to your actual scripts. You can still use one function, just apply it to each element.
The click handler will receive an event object which gives information about the click. Part of that is the .target property which will give you the source of the click event i.e, the element you clicked on.
function clicked(e) {
var target = e.target;
console.log(target.id);
}
document.querySelector('#box1').addEventListener('click', clicked);
document.querySelector('#box2').addEventListener('click', clicked);
document.querySelector('#box3').addEventListener('click', clicked);
.box {
float: left;
width: 100px;
height: 100px;
margin-right: 2px;
background-color: #000;
color: #EEE;
}
<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
<div id="box3" class="box">Box 3</div>
If you're hellbent on using inline bindings, the simplest way to do this would be to pass this into your function call. That will pass the element directly.
function clicked(target) {
console.log(target.id);
}
.box {
float: left;
width: 100px;
height: 100px;
margin-right: 2px;
background-color: #000;
color: #EEE;
}
<div id="box1" class="box" onclick="clicked(this)">Box 1</div>
<div id="box2" class="box" onclick="clicked(this)">Box 2</div>
<div id="box3" class="box" onclick="clicked(this)">Box 3</div>

By adding clicked(this) it selects the div you click on and returns that specific div's data.
<div id="box1" onClick="clicked(this)">Box 1</div>
<div id="box2" onClick="clicked(this)">Box 2</div>
<div id="box3" onclick="clicked(this)">Box 3</div>
By adding the div as a parameter it specifies the div you clicked on's internal data, and adding a switch statement to trigger a specific response to each div.
function clicked(div) {
if(div.id = 'box1') {
console.log('1');
} else if(div.id = 'box2') {
console.log('2');
} else if(div.id = 'box3') {
console.log('3');
}
}

jQuery selector for first row of inline-block divs

I have some divs with display: inline-block; and I have to select first row of divs and set them for example different border color and I need to do it in javaScript (jQuery).
Here is my example on jsFiddle
HTML :
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
</div>
CSS :
.container {
border: 1px solid red;
padding: 10px;
}
.item {
display: inline-block;
border: 1px solid green;
width: 200px;
margin: 10px;
}
Is there a way how to do it?

You have to check what elements are in the first row, and mark those. A way to do this would be fiddle
This code makes the assumption that the first element is first in a row (which is always true), and checks which elements have the same offset top, it then applies a borderColor change to them
var top;
$('.container .item').each(function(i){
var thistop = $(this).offset().top;
if (i==0){
top = thistop;
}
if (top==thistop){
$(this).css({borderColor:"purple"});
}
});
Note that in a real life application you'd use a event handler on window resize to run this again on window resize.
I made a separate fiddle to do the event handler version. This requires wrapping above code in a function, and changing the functionality a bit to add/remove classes instead of just adding css (since adding and manually removing css get's messy). Fiddle can be found here.
So instead of adding css, it adds/removes a class
markrow = function(){
$('.container .item').each(function(i){
...
if (top==thistop){
$(this).addClass('special');
}else{
$(this).removeClass('special');
}
});
}
markrow();
$(window).on('resize',markrow);
With special being a css class that changes the border color
.special {
border-color:purple;
}

You may use vanilla CSS Selector for this in jquery.
Assuming that you have a grid of 3 X 3.
$( ".container .item:nth-child(3n + 1)" ).css( "border-color","black" );

$('.item').eq(0).addClass('special-border');
.special-border {
border-color: #00f;
}
http://jsfiddle.net/8193xgfn/9/

you can get the width of your container which has a css-style named "container" by $(".container").width,
and then you can calculate how many divs can be put in the first row,and put it in a variable like firstrow_divNums.
now use $(".calculate").children() to get the child-divs,
finally use "for" loop from $(".calculate").children().eq(0) to $(".calculate").children().eq(firstrow_divNums) ,
and now you can do what you want like adding css-style to any elements.