Running a jQuery function on separate classes - html

Question

I have some HTML elements, that all have the same markup. Each div does have a unique parent class.
So when I try to write some jQuery to target each element individually it triggers on all instances regardless of whether I specify which class to target. My thinking was by using (this) it would only target stuff inside of the div 'box__wrapper--before'.
Does anyone know where I am going wrong?
$('.box__wrapper--before').each(function() {
$(this).find('.box__random').insertBefore('.box__item:nth-child(3');
});
html {
box-sizing: border-box;
font-size: 62.5%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #282828;
color: white;
font-family: "Montserrat", sans-serif;
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
margin: 0;
}
h1 {
color: white;
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
margin-top: 0;
}
.box__wrapper {
color: #111;
padding-bottom: 20px;
padding-top: 20px;
}
.box__wrapper:nth-child(odd) {
background: green;
}
.box__wrapper:nth-child(even) {
background: blue;
}
.box__container {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
.box__flex__wrapper {
display: flex;
justify-content: center;
margin-left: -60px;
}
.box__item {
padding-left: 60px;
flex-basis: 20%;
max-width: 20%;
}
.box__item span {
align-items: center;
border: 4px solid white;
border-radius: 100px;
display: flex;
height: 60px;
justify-content: center;
}
.box__one span,
.box__three span {
background: #58b2eb;
}
.box__two span,
.box__four span {
background: #ffa770;
}
.box__random span {
background: #7fd28c;
}
.prod__cta__msg {
background: red;
bottom: 0;
position: absolute;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box__wrapper box__wrapper--before">
<div class="box__container">
<div class="box__flex__wrapper">
<div class="box__item box__one">
<span>Div One</span>
</div>
<div class="box__item box__two">
<span>Div Two</span>
</div>
<div class="box__item box__three">
<span>Div Three</span>
</div>
<div class="box__item box__four">
<span>Div Four</span>
</div>
<div class="box__item box__random">
<span>Dynamic Div 1</span>
</div>
</div>
</div>
</section>
<section class="box__wrapper box__wrapper--after">
<div class="box__container">
<div class="box__flex__wrapper">
<div class="box__item box__one">
<span>Div One</span>
</div>
<div class="box__item box__two">
<span>Div Two</span>
</div>
<div class="box__item box__three">
<span>Div Three</span>
</div>
<div class="box__item box__four">
<span>Div Four</span>
</div>
<div class="box__item box__random">
<span>Dynamic Div 2</span>
</div>
</div>
</div>
</section>
Codepen Example: https://codepen.io/nickelse/pen/MWbdvPw

Answer 1

The issue is with:
.insertBefore('.box__item:nth-child(3)')
which appends the box_random into all sections.
The .insertBefore can take a jquery object (not just a string selector) which specifies the insertion point, so you can use this to find only the relevant nth-child:
$('.box__wrapper--before').each(function() {
var third = $('.box__item:nth-child(3)', this);
$(this).find('.box__random').insertBefore(third);
});
(variable not required, shown for clarity)
The original could have been written as:
$('.box__wrapper--before').each(function() {
var third = $('.box__item:nth-child(3)');
$(this).find('.box__random').insertBefore(third);
});
where you can see that
var third = $('.box__item:nth-child(3)');
selects all items across all parents - so needs that specificity added.
Giving an updated snippet below. Here the box__random in the 2nd div is not moved because it's not in .box__wrapper--before.
$('.box__wrapper--before').each(function() {
$(this).find('.box__random').insertBefore($('.box__item:nth-child(3)', this));
});
html {
box-sizing: border-box;
font-size: 62.5%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #282828;
color: white;
font-family: "Montserrat", sans-serif;
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
margin: 0;
}
h1 {
color: white;
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
margin-top: 0;
}
.box__wrapper {
color: #111;
padding-bottom: 20px;
padding-top: 20px;
}
.box__wrapper:nth-child(odd) {
background: green;
}
.box__wrapper:nth-child(even) {
background: blue;
}
.box__container {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
.box__flex__wrapper {
display: flex;
justify-content: center;
margin-left: -60px;
}
.box__item {
padding-left: 60px;
flex-basis: 20%;
max-width: 20%;
}
.box__item span {
align-items: center;
border: 4px solid white;
border-radius: 100px;
display: flex;
height: 60px;
justify-content: center;
}
.box__one span,
.box__three span {
background: #58b2eb;
}
.box__two span,
.box__four span {
background: #ffa770;
}
.box__random span {
background: #7fd28c;
}
.prod__cta__msg {
background: red;
bottom: 0;
position: absolute;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box__wrapper box__wrapper--before">
<div class="box__container">
<div class="box__flex__wrapper">
<div class="box__item box__one">
<span>Div One</span>
</div>
<div class="box__item box__two">
<span>Div Two</span>
</div>
<div class="box__item box__three">
<span>Div Three</span>
</div>
<div class="box__item box__four">
<span>Div Four</span>
</div>
<div class="box__item box__random">
<span>Dynamic Div 1</span>
</div>
</div>
</div>
</section>
<section class="box__wrapper box__wrapper--after">
<div class="box__container">
<div class="box__flex__wrapper">
<div class="box__item box__one">
<span>Div One</span>
</div>
<div class="box__item box__two">
<span>Div Two</span>
</div>
<div class="box__item box__three">
<span>Div Three</span>
</div>
<div class="box__item box__four">
<span>Div Four</span>
</div>
<div class="box__item box__random">
<span>Dynamic Div 2</span>
</div>
</div>
</div>
</section>