I'm trying to make an image puzzle game where there is a 4by4 grid to try to solve a shuffled puzzle. I tried creating a 4by4 grid but had no luck let alone have each element in the array correspond to a puzzle piece on the board. I tried making divs for each image but couldn't figure out a way to display them properly on the board. How do I accomplish a 4by4 grid that can correspond to elements in my array?
Note: I know that my images don't display properly because the files haven't been converted to stack overflow's server, ignore it for now.
var pieces = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,];
function initialize()
{
for( var i = pieces.length; i<16; i++;){}
}
function shuffle()
{
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: radial-gradient(#9D5900, #3D2200);
}
.game-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
margin: 50px;
justify-content: center;
perspective: 500px;
}
.card {
height: 225px;
width: 175px;
}
<!DOCTYPE html>
<html>
<title></title>
<link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
<script src="PicturePuzzle.js" type="text/javascript"></script>
<head>
<body onload = "initialize()">
<div class="game-container">
<div class="card">
<img src="char1.jpg">
</div>
<div class="card">
<img src ="char2.jpg">
</div>
<div class="card">
<img src ="char3.jpg">
</div>
<div class="card">
<img src="char4.jpg">
</div>
<div class="card">
<img src="char5.jpg">
</div>
<div class="card">
</div>
<img src="char6.jpg">
</div>
<div class="card">
<img src="char7.jpg" >
<div class="card">
<img src="char8.jpg" >
</div>
<div class="card">
<img src="char9.jpg" >
</div>
<div class="card">
<img src="char10.jpg">
</div>
<div class="card">
<img src="char11.jpg">
</div>
<div class="card">
<img src="char12.jpg">
</div>
<div class="card">
<img src="char13.jpg">
</div>
<img src="char14.jpg">
</div>
<div class="card">
<img src="char15.jpg">
</div>
<img src="char16.jpg">
</div>
</div>
<button onclick = "shuffle()">Shuffle</button>
</body>
</head>
</html>
You have HTML errors messing up the grid - there are </div> tags in the wrong places - and missing <div> tags
Correct HTML:
<div class=game-container>
<div class=card>
<img src=char1.jpg>
</div>
<div class=card>
<img src=char2.jpg>
</div>
<div class=card>
<img src=char3.jpg>
</div>
<div class=card>
<img src=char4.jpg>
</div>
<div class=card>
<img src=char5.jpg>
</div>
<div class=card>
<img src=char6.jpg>
</div>
<div class=card>
<img src=char7.jpg>
</div>
<div class=card>
<img src=char8.jpg>
</div>
<div class=card>
<img src=char9.jpg>
</div>
<div class=card>
<img src=char10.jpg>
</div>
<div class=card>
<img src=char11.jpg>
</div>
<div class=card>
<img src=char12.jpg>
</div>
<div class=card>
<img src=char13.jpg>
</div>
<div class=card>
<img src=char14.jpg>
</div>
<div class=card>
<img src=char15.jpg>
</div>
<div class=card>
<img src=char16.jpg>
</div>
</div>
There is a Javascript error - it doesn't affect the grid
There should be no semicolon after the increment expression in loop control statement
Also prefer to use let instead of var
for(let i=pieces.length; i<16; i++) {}
Related
I am new to jQuery and confused about simple logic and need your help to sort the mess. I am using HTML, CSS, jQuery to display some data by on click the jQuery event on selector '.class'.
I have successfully opened the data for the first time for a single div panel. But if I used the same HTML twice then both of the panels display data at the same. Below is the code
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).siblings(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So I want to open one by one i.e. when someone clicks on the year 2021 then it will open its data and if someone clicks on 2022 then that year div data open.
How to achieve the same?
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).next(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use next instead of siblings
JQuery(document).ready(function() {
JQuery(".flip").click(function () {
JQuery(this).next(".panel").slideToggle("slow");
});
});
Working codepen. https://codepen.io/rvtech/pen/zYEWxqR
$(".flip").click(function(e) {
$(this).next().slideToggle()
})
https://codepen.io/hardik9193/pen/yLzKNEZ
I have 2 divs like this belonging to different teams. All of them has different names and ids
<div id="joinville">
<div class="gk">
<div id="john">
<img src:xxx ">
<h6 class="namejoinville ">John</h6>
</div>
<div id="jake ">
<img src:xxx">
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src:xxx ">
<h6 class="namejoinville ">Allan</h6>
</div>
</div>
</div>
<div id="thunder ">
<div class="gk ">
<div id="amilcar ">
<img src:xxx">
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src:xxx ">
<h6 class="namethunder ">Peter</h6>
</div>
<div id="jm ">
<img src:xxx">
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
Them I have this:
<div id="onethree">
<div id="grteam">
<img src="xxx"">
<h6 id="j1">GK</h6>
</div>
I want to whenever I click on one of the player to change the "grteam" div to the one selected.
How can i make this with js?
Sorry, if this is basic stuff but i'm still a begginner
when you click on the player name his data moves to #grteam
document.querySelectorAll('.gk div h6').forEach(player => {
player.addEventListener('click', updateSelectedPlayer, this);
});
function updateSelectedPlayer(player) {
let greatPlayerImg = document.querySelector('#grteam>img'),
greatPlayerName = document.querySelector('#grteam>h6'),
selectedPlayerImg = player.target.parentNode.querySelector('img').src,
selectedPlayerName = player.target.innerHTML;
greatPlayerImg.src = selectedPlayerImg;
greatPlayerName.innerHTML = selectedPlayerName;
}
<div id=Joinville>`
<div class="gk">
<div id="john">
<img src='xxx'>
<h6 class="namejoinville">John</h6>
</div>
<div id="jake">
<img src='xxx'>
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src='xxx'>
<h6 class="namejoinville">Allan</h6>
</div>
</div>
</div>
<div id=Joinville>`
<div class="gk">
<div id="amilcar">
<img src='xxx'>
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src='xxx'>
<h6 class="namethunder">Peter</h6>
</div>
<div id="jm">
<img src='xxx'>
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
<div id="onethree">
<div id="grteam">
<img src="xxx">
<h6 id="j1">GK</h6>
</div>
</div>
I suggest as a beginner that you get used to using common class names for similar elements
Here I have two class="team" and each team has a group of class="player" and each player has an inner class="player-name"
Note that the id on player elements is irrelevant this way
You can add other classes as well but this helps styling the structure and makes the javascript simpler to traverse these common items
Working example without the images. You can extend this to work with those yourself
const players = document.querySelectorAll('.player')
players.forEach(function(el) {
el.addEventListener('click', function(e) {
// name of selected player
const name = el.querySelector('.player-name').textContent;
// add selected name to grteam
document.querySelector('#j1').textContent = name;
// remove active class from players
players.forEach(function(el) {
el.classList.remove('active')
})
// add active class to selected player
el.classList.add('active')
})
})
#container{display:flex}
.team{flex-basis:50%;padding:.5em}
h6{ font-size: 1em; margin:0}
.player{ border:2px solid #ccc; padding:.5em; margin-bottom:1em}
.player.active{border-color:red}
<div id="grteam">
Active: <strong id="j1">None</strong>
</div>
<div id="container">
<div class="team">
<div class="player">
<h6 class="player-name">John</h6>
</div>
<div class="player">
<h6 class="player-name">Jake</h6>
</div>
<div class="player">
<h6 class="player-name">Allan</h6>
</div>
</div>
<div class="team">
<div class="player">
<h6 class="player-name">Amilcar</h6>
</div>
<div class="player">
<h6 class="player-name">Peter</h6>
</div>
<div class="player">
<h6 class="player-name">James</h6>
</div>
</div>
</div>
I've used slick slider before, but now I don't what causes this ruckus.
Am I missing something? I've followed the instruction at slick slider and also at github, I'm puzzled.
//JS here
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
/* Style here */
.container{
max-width:1200px;
margin:0 auto;
}
<!-- Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- Html -->
<div class="container">
<div class="slider">
<div class="slides">
<img src="Picture4" alt="">
</div>
<div class="slides">
<img src="Picture3" alt="">
</div>
<div class="slides">
<img src="Picture2" alt="">
</div>
<div class="slides">
<img src="Picture1" alt="">
</div>
</div>
</div>
After analyzing your code, I noticed that the slick css import was missing.
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css
I leave your example below with the CSS import.
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
.container{
max-width:1200px;
margin:0 auto;
}
.slider{
display:flex;
.slides{
display:flex;
justify-content:center;
}
}
<!-- this line is missing -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container">
<div class="slider">
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
</div>
</div>
I have 3 images i want to display them inline style with text under them but without using bootstrap grid-system because i want them to be close to each other and centered, i tried doing it but once i add the text they get displayed under each other, how can i fix that? here is my code:
.box{
display:inline;
}
<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
You can also use flex on the parent and it will put them side-by-side.
.boxes{
display:flex;
justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center boxes">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
You were close, but it should be display: inline-block. See code snippet:
.box{
display:inline-block;
}
<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
Note: I see you've added the text-center class which is not working here on Stack Overflow, but should do the trick in your own code.
CSS Flexbox to the rescue (along with proper HTML semantics and no inline CSS styles)!
.container { display:flex; justify-content:center; }
.container figure { text-align:center; margin:0; }
.container img { height:120px; }
<div class="text-center container">
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
</div>
In working with a code chunk such as the following, I am attempting to add a unique class name to each instance of the class "duplicated-class" which is on the same element as the class "affiliate-logo".
Important notes:
"duplicated-class" represents a dynamic variable, that could be anything.
The desired outcome is to append the duplicated classes with a numeral ('.class-1', '.class-2', '.class-3', etc....
Here is an example the code structure:
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
</div>
The post-item group is being generated from a COS-listing with the 'duplicate-class' being pulled from the {{name}} value that must allow for duplicate value entries.
While I can find methods for producing class lists for direct descendants of the wrapping ID, I cannot seem to find (or figure out) anything that produces the result of finding the "duplicate-class" while nested more deeply in the produced structure.
My initial thoughts are to:
Identify the post-item groups
Find the '.affiliate-logo' class within each post-item group
Identify the second class next to '.affiliate-logo' (in this example: .duplicate-class) and assign it to a variable (var = adjacentClass) <-- this is where I get lost on how to accomplish this check.
Check to see if (adjacentClass) matches any other (adjacentClass) from other post-item groups.
Use counter to act as unique identifier addition (var i = i)
if(adjacentClass === adjacentClass){ $(".duplicate-class').replaceClass('adjacentClass' + i) } else {}
(I would actually try write that logic out in javascript, if I could figure out step 3.)
Any assistance that can be offered for this issue would be much appreciated.
Articles I have referenced in attempting to find a solution:
How find nested div with same class name in jquery?
How do I access the list of classnames using javascript/jQuery?
jquery select class inside parent div
Target the 2nd instance of a CSS Class
** Edited to fix a terminology conflict
UPDATE 2
In Snippet 2 we have used .each() twice. Once to iterate every div.affiliate-logo and once for the second class each div.affiliate-logo has. A for loop filters out duplicates that are stored in an array. The hardest part was what OP had trouble was with getting the second class. This is how:
$(this).prop('classList');
In plain JavaScript, classList is a property when it's used without any .add, .remove, etc. it will return an array of classNames (in the comments of Snippet 2, any reference to a string in this array will be "classString").
Review Snippet 2 in Full page mode. Details are commented in Snippet 2.
UPDATE 1
the first 'duplicate-class' becomes 'duplicate-class-1', the second becomes 'duplicate-class-2'
Not sure what you are trying to do. I think you are thinking that classes are like DOM objects as elements are. Review the Snippet and let me know if this is what you wanted or not.
SNIPPET 1
$('.duplicate-class').each(function(idx, obj) {
var unique = 'duplicate-class' + (idx + 1);
$(this).addClass(unique)
$(this).text('this is ' + unique); //This is just to show it works
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
SNIPPET 2
// .each() .affiliate-logo do this...
$('.affiliate-logo').each(function(idx, obj) {
/* Get the classList .prop()erty and store it
|| in a var called list. list is now an array
|| of classes that belong to this particular
|| .affiliate-logo.
*/
var list = $(this).prop('classList');
// Store the second classString in a var called second
var second = list[1];
/* Create an array with the classString of 'affiliate-
|| logo' because we already know that it will be a
|| duplicate. Call this array dupes.
*/
var dupes = ['affiliate-logo'];
/* for every classString that's in dupes array
|| compare it to the value of second. If there's
|| a match bust out of this loop and go on to the
|| next .affiliate-logo.
*/
for (let a = 0; a < dupes.length; a++) {
if (second === dupes[a]) {
return;
}
}
/* Since there were no matches, we continue.
|| Push second in the dupes array so if ever found
|| again, second will be rejected by the previous
|| for loop.
*/
dupes.push(second);
/* Concat second with a dot so it'll pass as a class
|| selector then store it in a var called klass.
*/
var klass = '.' + second;
// each() klass will...
$(klass).each(function(index, item) {
/* concat second + (current)index as a string
|| then addClass() that string to the current
|| div.affiliate-logo.{{klass}}
*/
$(item).addClass(second + index);
/* insert text that shows it's new class. The
|| new unique class can be verified by F12.
*/
$(item).text('This is ' + second + index);
});
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo o-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo klass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo a-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo dupe-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo bass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo wrong-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo logo-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo long-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>