I'm trying to build a simple game where the player can move between multiple levels.
The player is an image in my case i tried to move it by using javascript but it's not moving! I have tried multiple websites suggestions but none of them has worked
var avatar = document.getElementByClassName("alien-avatar");
var avatarStyle = document.getComputedStyle("alien-avatar");
var topValue = avatarStyle.getPropertyValue("top").replace("px", "");
function moveDown(element) {
var eStyle = window.getComputedStyle(element);
var topValue = eStyle.getPropertyValue("top").replace("px", "");
element.style.top = (Number(topValue) + 20) + "px";
}
moveDown("element");
// Subtract from the top style attribute to go up
function moveUp(element) {
var elStyle = window.getComputedStyle(element);
var topValue = elStyle.getPropertyValue("top").replace("px", "");
element.style.top = (Number(topValue) - 20) + "px";
}
// Add to the left style attribute to go right
function moveRight(element) {
var elStyle = window.getComputedStyle(element);
var leftValue = elStyle.getPropertyValue("left").replace("px", "");
element.style.left = (Number(leftValue) + 20) + "px";
}
// Subtract from the left style attribute to go left
function moveLeft(element) {
var elStyle = window.getComputedStyle(element);
var leftValue = elStyle.getPropertyValue("left").replace("px", "");
element.style.left = (Number(leftValue) - 20) + "px";
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="main-game-table">
<div class="top-items-wrapper">
<div class="profile">
<div class="avatar"></div>
<span class="nickname">Nickname</span>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Complated Total Missions</div>
</div>
<div class="settings-btn">
<div class="setting-log"></div>
<ul class="drop-menu show-sett-drop">
<li class="setting-btn">Settings</li>
<li class="exit-btn">Exit</li>
</ul>
</div>
</div>
<!---->
<div class="game-planets">
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet1-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
</div>
<div class="celeb-message">
<span>GREAT!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet2-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>nice!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet3-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>keep it up</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet4-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>nice!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="current-planet">
<div class="alien-avatar" style="
width:100%;
height:100%;
top:0px;
left:0px;
"><img src="images/default-avatar.png" alt=""></div>
<div class="box" style="--n:20;--b:5px;width:150px;--c:#2beeff"></div>
</div>
</div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
</div>
<button class="start-btn">start</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
any help would be highly appreciate it!
please note that im still a beginner in this field
You are using getComputedStyle to remember what the position of an element is, but I would recommend keeping track of your elements positions in your code and not just in the HTML/CSS. Just a short example:
let avatar = document.getElementById("alien-avatar");
let avatarx = 20;
let avatary = 20;
function movePlayerUp() {
avatary--;
avatar.style.top = avatary + "px";
}
Update
You can also use getBoundingClientRect to check an element's position in the DOM
function moveRight() {
let position = avatar.getBoundingClientRect();
let newposition = position.x + 10;
avatar.style.left = newposition + "px";
}
The player element needs an id.
<div id="alien-avatar"...></div>
Related
I am trying to show a couple of iframes in my site, but want them to be responsive - keeping their aspect ratio (16:9) - and scale their contents using CSS scale() function - so preserving actual frame width & height.
Below you may find my attempt, which works fine on page load, but it's not responsive on page resize.
var iframe = document.getElementById('frame'),
iframeinitialwidth = $('iframe').width();
jQuery.fn.fitToParent = function () {
this.each(function () {
var $iframe = jQuery(this);
var width = $iframe.width();
var height = $iframe.height();
var parentWidth = $iframe.parent().width();
var parentHeight = $iframe.parent().height();
var aspect = width / height;
var parentAspect = parentWidth / parentHeight;
if (aspect > parentAspect) {
newWidth = parentWidth;
newHeight = newWidth / aspect;
} else {
newHeight = parentHeight;
newWidth = newHeight * aspect;
}
});
var scaleFactor = newWidth/iframeinitialwidth;
$('iframe').css({'-webkit-transform': 'scale('+scaleFactor+')', '-webkit-transform-origin': '0 0'});
};
$('.frame').fitToParent();
$( window ).resize(function() {
console.log("resizing window");
$('.frame').fitToParent();
});
.frame-wrapper{
aspect-ratio: 16 / 9;
background-color: red;
position: relative;
}
.frame {
position: absolute;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="bg-light">
<div class="container">
<div class="row mt-4 px-2">
<div class="col ms-sm-auto col-lg-12 px-md-4">
<h1 class="h2">Dashboard</h1>
<div class="row">
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3 my-4">
<div class="card">
<h5 class="card-header">Test</h5>
<div class="card-body p-0">
<div class="frame-wrapper">
<iframe frameborder="no" class="frame" src="https://www.wikipedia.org/" id="frame" width="1280px" height="720px"></iframe>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3 my-4">
<div class="card">
<h5 class="card-header">Test</h5>
<div class="card-body p-0">
<div class="frame-wrapper">
<iframe frameborder="no" class="frame" src="https://en.wikipedia.org/wiki/Acquisition_of_Twitter_by_Elon_Musk" id="frame" width="1280px" height="720px"></iframe>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3 my-4">
<div class="card">
<h5 class="card-header">Test</h5>
<div class="card-body p-0">
<div class="frame-wrapper">
<iframe frameborder="no" class="frame" src="https://en.wikipedia.org/wiki/2022_French_presidential_election" id="frame" width="1280px" height="720px"></iframe>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3 my-4">
<div class="card">
<h5 class="card-header">Test</h5>
<div class="card-body p-0">
<div class="frame-wrapper">
<iframe frameborder="no" class="frame" src="https://en.wikipedia.org/wiki/Sinking_of_the_Moskva" id="frame" width="1280px" height="720px"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I am trying to get innerHtml from one paragraph (.img-text class) using JavaScript and then inserting it in another (.caption class) when clicked on an image.
My HTML looks like that:
<div class="galle">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption"></p>
</div>
<div class="card aluminiumCard">
<img id="imggene" src="img1.png" class="card-img-top alhigh" >
<div class="card-body imgal">
<p class="card-text">Genesis 75</p>
<p class="img-text">Text genesis</p>
</div>
</div>
<div class="card aluminiumCard">
<img src="img2.png" class="card-img-top alhigh" alt="..." >
<div class="card-body imgal">
<p class="card-text">Imperial</p>
<p class="img-text">Text imperial</p>
</div>
</div>
The Javascript code looks like that:
const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
previews.forEach(preview => {
preview.addEventListener('click', () =>{
modalimg.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute('src');
original.src = originalSrc;
})
})
It's responsible for an image pop up when clicking on an image inside a card. How I can get innerHTML data from the .img-text class, that's corresponding to the image that has been clicked inside a card and then paste that to the paragraph with .caption class?
I have tried:
const caption = document.querySelector(".caption");
const text-img = document.querySelectorAll(".img-text");
then:
const text = text-img.innerHTML
caption.innerHTML = text
But it takes data only from the first card.
const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
previews.forEach(preview => {
preview.addEventListener('click', () => {
modalimg.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute('src');
original.src = originalSrc;
})
})
<div class="galle">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption"></p>
</div>
<div class="card aluminiumCard">
<img id="imggene" src="img1.png" class="card-img-top alhigh">
<div class="card-body imgal">
<p class="card-text">Genesis 75</p>
<p class="img-text">Text genesis</p>
</div>
</div>
<div class="card aluminiumCard">
<img src="img2.png" class="card-img-top alhigh" alt="...">
<div class="card-body imgal">
<p class="card-text">Imperial</p>
<p class="img-text">Text imperial</p>
</div>
</div>
const image = document.getElementsByClassName("card-img-top");
const renderToCaption = (i) => {
document.getElementsByClassName("caption")[0].innerHTML = document.getElementsByClassName("img-text")[i].innerHTML;
document.getElementsByClassName("full-img")[0].setAttribute("src", document.getElementsByClassName("card-img-top")[i].getAttribute("src"));
};
for (let i = 0; i < image.length; i++) {
image[i].addEventListener("click", ()=>renderToCaption(i));
}
.card-img-top, .full-img{
width: 150px;
cursor:pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="galle">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption">abc</p>
</div>
<div class="card aluminiumCard">
<img id="imggene" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/1200px-Android_robot_head.svg.png" class="card-img-top alhigh">
<div class="card-body imgal">
<p class="card-text">Genesis 75</p>
<p class="img-text">Text genesis</p>
</div>
</div>
<div class="card aluminiumCard">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/HeroHomepage_2880x1200.max-1300x1300.jpg" class="card-img-top alhigh" alt="...">
<div class="card-body imgal">
<p class="card-text">Imperial</p>
<p class="img-text">Text imperial</p>
</div>
</div>
</body>
</html>
Check the code above, i guess this fulfils your need. Don't just copy paste, read and understand how it works.
ADVISE: Consider using vanilla JS instead of jQuery on places where possible.
BEST OF LUCK
I want to select multiple modals through Javascript. I have already set an id on every modal.
So far I am able to loop through the elements but I don't know how to grab every id of modals.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my Javascript:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i< projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', ()=> {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
}, false);
}
I saw this.dataset.modal implement at one of the solutions. But unfortunately, it didn't work. How can I grab that particular id of element when its parent modal is clicked.
Any help would be appreciated.
Code for closing modal when clicking outside:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Open modeal: The first loop puts "addEventListener" which takes date information with the ID of the modal.
Close modal: The second loop takes all the "close" buttons. Puts "addEventListener" when this button is pressed, it applies a style display:none; to the parent item
const projects = document.querySelectorAll('.projects > div');
for (var i = 0; i < projects.length; i++) {
projects[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
document.getElementById(x).setAttribute('style', 'display:block;');
});
}
const close = document.querySelectorAll('.close');
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function () {
var x = this.parentElement;
x.setAttribute('style', 'display:none;');
});
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
There is no this in arrow (=>) function syntax, use normal function syntax instead.
Demo:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i < projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', function() {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
console.log('You have clicked: ' +this.dataset.modal);
}, false);
}
.project-card{
display: none;
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
I need to create multiple slick slider in a single div .
There is some buttons related to slick. When I click on a button the slider changes corresponding to it.
I have tried it with kenwheeler slick slider but it doesn't work as I expect .It just creating a new slider item there.
$('.myslick').slick({
slidesToShow: 3,
slidesToScroll: 3
});
$('.newslick').on('click', function() {
jQuery('.myslick').html('<div>new content</div><div>new content</div><div>new content</div><div>new content</div> <div>new content</div><div>new content</div>').slick();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<div class="myslick">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<button class="newslick">New Slick</button>
<button class="featuredslick">Featured Slick</button>
<button class="oldslick">Old Slick</button>
I need to change the content dynamically with json or ajax.
I think this is you want to do. Its a custom function created with slick for my use.
class Tkslider{constructor(x) {this.x = x;var o,n,l;}slider(){var y=this.x[0];var co=(typeof(this.x[1]) != "undefined" && this.x[1] !== null) ? this.x[1] : {slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: true,asNavFor: y+'_thumb',};var cn=(typeof(this.x[2]) != "undefined" && this.x[2] !== null) ? this.x[2] : {slidesToShow: 7,slidesToScroll: 1,asNavFor: y,dots: false,arrows: false,focusOnSelect: true};this.o = jQuery(y).slick(co);this.n = jQuery(y+'_thumb').slick(cn);this.l = jQuery(y).lightGallery({selector: 'a'});}destroy(){this.o.slick('unslick');this.n.slick('unslick');this.l.data('lightGallery').destroy(true);}}
setTimeout(function(){
jQuery(slider.x[0]).css('height',(jQuery(slider.x[0]).height()));
},2000);
var slider = new Tkslider(['#slider']);
var slide = slider.slider();
var slidejson ;
$('[data-slidertype]').bind("click", { key: slide }, function(event){
var newslide = '';
var newslide_thumb = '';
if($(this).data('slidertype') === 'camera'){
slidejson = [
{'src':'http://placehold.it/300x150&text=a1','thumb':'http://placehold.it/100x100&text=a1'},
{'src':'http://placehold.it/300x150&text=a2','thumb':'http://placehold.it/100x100&text=a2'},
{'src':'http://placehold.it/300x150&text=a3','thumb':'http://placehold.it/100x100&text=a3'},
{'src':'http://placehold.it/300x150&text=a4','thumb':'http://placehold.it/100x100&text=a4'},
{'src':'http://placehold.it/300x150&text=a5','thumb':'http://placehold.it/100x100&text=a5'},
{'src':'http://placehold.it/300x150&text=a6','thumb':'http://placehold.it/100x100&text=a6'},
{'src':'http://placehold.it/300x150&text=a7','thumb':'http://placehold.it/100x100&text=a7'},
];
}
else if($(this).data('slidertype') === 'threesix'){
slidejson = [
{'src':'http://placehold.it/300x150&text=b1','thumb':'http://placehold.it/100x100&text=b1'},
{'src':'http://placehold.it/300x150&text=b2','thumb':'http://placehold.it/100x100&text=b2'},
{'src':'http://placehold.it/300x150&text=b3','thumb':'http://placehold.it/100x100&text=b3'},
{'src':'http://placehold.it/300x150&text=b4','thumb':'http://placehold.it/100x100&text=b4'},
{'src':'http://placehold.it/300x150&text=b5','thumb':'http://placehold.it/100x100&text=b5'},
{'src':'http://placehold.it/300x150&text=b6','thumb':'http://placehold.it/100x100&text=b6'},
{'src':'http://placehold.it/300x150&text=b7','thumb':'http://placehold.it/100x100&text=b7'},
{'src':'http://placehold.it/300x150&text=b8','thumb':'http://placehold.it/100x100&text=b8'},
{'src':'http://placehold.it/300x150&text=b9','thumb':'http://placehold.it/100x100&text=b9'},
{'src':'http://placehold.it/300x150&text=b10','thumb':'http://placehold.it/100x100&text=b10'},
{'src':'http://placehold.it/300x150&text=b11','thumb':'http://placehold.it/100x100&text=b11'},
];
}
else if($(this).data('slidertype') === 'vdo'){
slidejson = [
{'src':'http://placehold.it/300x150&text=c1','thumb':'http://placehold.it/100x100&text=c1'},
{'src':'http://placehold.it/300x150&text=c2','thumb':'http://placehold.it/100x100&text=c2'},
{'src':'http://placehold.it/300x150&text=c3','thumb':'http://placehold.it/100x100&text=c3'},
{'src':'http://placehold.it/300x150&text=c4','thumb':'http://placehold.it/100x100&text=c4'},
{'src':'http://placehold.it/300x150&text=c5','thumb':'http://placehold.it/100x100&text=c5'},
{'src':'http://placehold.it/300x150&text=c6','thumb':'http://placehold.it/100x100&text=c6'},
{'src':'http://placehold.it/300x150&text=c7','thumb':'http://placehold.it/100x100&text=c7'},
{'src':'http://placehold.it/300x150&text=c8','thumb':'http://placehold.it/100x100&text=c8'},
{'src':'http://placehold.it/300x150&text=c9','thumb':'http://placehold.it/100x100&text=c9'},
{'src':'http://placehold.it/300x150&text=c10','thumb':'http://placehold.it/100x100&text=c10'},
];
}
$.each(slidejson, function (x, y) {
newslide += '<div data-index="x"><img src="'+y.src+'" alt="One" class="img-responsive w100"/></div>';
newslide_thumb += '<div><img src="'+y.thumb+'" class="img-responsive w100"/></a></div>';
});
slider.destroy();
$('#slider').html(newslide);
$('#slider_thumb').html(newslide_thumb);
slide = slider.slider();
});
body *{outline:none;}
.slick-slide {height: auto;}
.slider-nav-thumbnails .slick-slide {opacity: 0.5;}
.slider-nav-thumbnails .slick-slide.slick-current {opacity: 1;}
.w100{width: 100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" />
<div class="container-fluid">
<div class="col-md-12">
<!-- MAIN SLIDES -->
<div id="slider" class="">
<div data-index="1">
<a href="http://placehold.it/300x150&text=one">
<img src="http://placehold.it/300x150&text=one" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="2">
<a href="http://placehold.it/300x150&text=two">
<img src="http://placehold.it/300x150&text=two" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="3">
<a href="http://placehold.it/300x150&text=three">
<img src="http://placehold.it/300x150&text=three" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="4">
<a href="http://placehold.it/300x150&text=four">
<img src="http://placehold.it/300x150&text=four" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="5">
<a href="http://placehold.it/300x150&text=five">
<img src="http://placehold.it/300x150&text=five" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="6">
<a href="http://placehold.it/300x150&text=six">
<img src="http://placehold.it/300x150&text=six" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="7">
<a href="http://placehold.it/300x150&text=seven">
<img src="http://placehold.it/300x150&text=seven" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="8">
<a href="http://placehold.it/300x150&text=eight">
<img src="http://placehold.it/300x150&text=eight" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="9">
<a href="http://placehold.it/300x150&text=nine">
<img src="http://placehold.it/300x150&text=nine" alt="One" class="img-responsive w100">
</a>
</div>
</div>
<!-- THUMBNAILS -->
<div id="slider_thumb" class="slider-nav-thumbnails">
<div><img src="http://placehold.it/100x100&text=one" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=two" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=three" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=four" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=five" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=six" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=seven" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=eight" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=nine" class="img-responsive w100"></div>
</div>
<div>
<button data-slidertype="camera">Image</button>
<button data-slidertype="threesix">360</button>
<button data-slidertype="vdo">Video</button>
</div>
</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>