Develop Reference

jQuery: alternate switching of classes in several div blocks

I have 2 identical div blocks on the page, inside of which there are several div blocks with different texts. It looks something like this:
<div class="dynamic_titles">
<div class="dynamic_title active">text 1</div>
<div class="dynamic_title inactive">text 2</div>
<div class="dynamic_title inactive">text 3</div>
<div class="dynamic_title inactive">text 4</div>
<div class="dynamic_title inactive">text 5</div>
</div>
<div class="dynamic_titles">
<div class="dynamic_title active">text 6</div>
<div class="dynamic_title inactive">text 7</div>
<div class="dynamic_title inactive">text 8</div>
<div class="dynamic_title inactive">text 9</div>
<div class="dynamic_title inactive">text 10</div>
</div>
I need to change classes from inactive to active in each dynamic_title block in turn. That is, the next one takes active, and the previous one with active in inactive and so on in a circle.
When I have one dynamic_titles block, everything works fine, but 2 interfere with each other, break. I'm trying not to make 2 functions for each block separately, I want to make one universal one that would be applied to each block separately.
Now I have such a code, but it does not work as expected. It runs once and goes no further. If done without .each, it works, but again not as expected and eventually breaks. What is my mistake?
$('.dynamic_titles').each(function () {
var index = 1,
max = $(this).find('.dynamic_title').length;
function setActiveHeadline() {
setTimeout(function () {
$(this).find('.active').removeClass('active').addClass('inactive');
index++;
if (index > max) {
index = 1;
}
$(this).find('.dynamic_title:nth-of-type(' + index + ')').addClass('active').removeClass('inactive');
setActiveHeadline();
}, 3000);
}
setActiveHeadline();
widthTitle = $(this).find('.dynamic_title.active').width();
$(this).css({
'width': widthTitle,
});
function setWidthHeadlines() {
setTimeout(function () {
widthTitle = $(this).find('.dynamic_title.active').width();
$(this).css({
'width': widthTitle,
});
setWidthHeadlines();
}, 3000);
}
setWidthHeadlines();
})
Thank you for your help!

I think you could simplify this into one function that uses setInterval, please see the following snippet:
$(function(){
//use setInterval to continue the changes
setInterval(() => {
//iterate the blocks
$('div.dynamic_titles').each(function() {
//get the children
const $children = $(this).find('div.dynamic_title');
//get the number of children
const numofchildren = $children.length;
//index for switching active in children
let activeindex = 0;
//iterate children to find the active one
$children.each(function(i, el) {
//if active, remove active and add inactive classNames
//store the index
//break the each loop
if($(el).hasClass('active')){
$(el).removeClass('active').addClass('inactive');
activeindex = i + 1;
return false;
}
});
//if index has reached the last child, reset to zero
if(activeindex > numofchildren - 1){
activeindex = 0;
}
//set the next child to active and remove inactive className
$children[activeindex].classList.add('active');
$children[activeindex].classList.remove('inactive');
});
}, 3000);
})
.active {
color:green;
}
.inactive {
color:grey;
}
<div class="dynamic_titles">
<div class="dynamic_title active">text 1</div>
<div class="dynamic_title inactive">text 2</div>
<div class="dynamic_title inactive">text 3</div>
<div class="dynamic_title inactive">text 4</div>
<div class="dynamic_title inactive">text 5</div>
</div>
<div class="dynamic_titles">
<div class="dynamic_title active">text 6</div>
<div class="dynamic_title inactive">text 7</div>
<div class="dynamic_title inactive">text 8</div>
<div class="dynamic_title inactive">text 9</div>
<div class="dynamic_title inactive">text 10</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>

Javascript forEach loop with current index after new element was deleted

I am trying to get the updated index of the forEach loop after an element has been removed from the DOM.
Here is my current script ...
function delete(){
var elm = document.querySelectorAll('.divs');
elm.forEach(function(item, index){
item.addEventListener('click', function(e){
document.querySelectorAll('.divs')[index].remove();
});
}
after the element was removed the calculations for the index are incorrect.
how can I get the index of the clicked item after one or more items has been removed?

I've a very simple solution, but I don't know if you can accept it!
Node list in DOM is always live, if you refer to it as a variable, this variable is active. Check here:
https://developer.mozilla.org/en-US/docs/Web/API/NodeList
I propose you just to hide it!
listDivs1();
deleteDiv1();
function listDivs1() {
let ht = '';
let els = document.querySelectorAll('#method1 .divs');
els.forEach(function(e, index) {
ht += 'index: ' + index + ' - ' + e.innerHTML + '<br>';
});
document.querySelector('.elements1').innerHTML = ht;
}
function deleteDiv1() {
let els = document.querySelectorAll('#method1 .divs');
els.forEach(function(item, index) {
item.addEventListener('click', function(e) {
document.querySelectorAll('.divs')[index].remove();
listDivs1();
});
});
}
listDivs2();
deleteDiv2();
function listDivs2() {
let ht = '';
let els = document.querySelectorAll('#method2 .divs');
els.forEach(function(e, index) {
ht += 'index: ' + index + ' - ' + e.innerHTML + '<br>';
});
document.querySelector('.elements2').innerHTML = ht;
}
function deleteDiv2() {
let els = document.querySelectorAll('#method2 .divs');
els.forEach(function(item, index) {
item.addEventListener('click', function(e) {
e.target.remove();
listDivs2();
});
});
}
listDivs3();
deleteDiv3();
function listDivs3() {
let ht = '';
let els = document.querySelectorAll('#method3 .divs');
els.forEach(function(e, index) {
if (e.style.display !== 'none') {
ht += 'index: ' + index + ' - ' + e.innerHTML + '<br>';
}
});
document.querySelector('.elements3').innerHTML = ht;
}
window.addEventListener('load', listDivs3);
function deleteDiv3() {
let els = document.querySelectorAll('#method3 .divs');
els.forEach(function(item, index) {
item.addEventListener('click', function(e) {
e.target.style.display = 'none';
listDivs3();
});
});
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
padding: 1em;
}
<h1>your delete</h1>
<div class="container">
<div id="method1">
<div class="divs">div 0</div>
<div class="divs">div 1</div>
<div class="divs">div 2</div>
<div class="divs">div 3</div>
<div class="divs">div 4</div>
<div class="divs">div 5</div>
<div class="divs">div 6</div>
<div class="divs">div 7</div>
<div class="divs">div 8</div>
<div class="divs">div 9</div>
</div>
<div class="elements1"></div>
</div>
<hr>
<h1>e.target</h1>
<div class="container">
<div id="method2">
<div class="divs">div 0</div>
<div class="divs">div 1</div>
<div class="divs">div 2</div>
<div class="divs">div 3</div>
<div class="divs">div 4</div>
<div class="divs">div 5</div>
<div class="divs">div 6</div>
<div class="divs">div 7</div>
<div class="divs">div 8</div>
<div class="divs">div 9</div>
</div>
<div class="elements2"></div>
</div>
<hr>
<h1>display none</h1>
<div class="container">
<div id="method3">
<div class="divs">div 0</div>
<div class="divs">div 1</div>
<div class="divs">div 2</div>
<div class="divs">div 3</div>
<div class="divs">div 4</div>
<div class="divs">div 5</div>
<div class="divs">div 6</div>
<div class="divs">div 7</div>
<div class="divs">div 8</div>
<div class="divs">div 9</div>
</div>
<div class="elements3"></div>
</div>
In the snippet you 2 columns, the one with the divs to click, and second one with index and div content to check after each delete the result.
So with your function, index and div disconnect. With e.target same. With display none, it's working because nothing has been really removed, only "visually" removed. If you have other functions iterating through all those divs you'll have to exclude the display none like in listDivs3 function.
If this display none doesn't suit you, The only way would be:
store all div in temporary variable
remove the one you need
remove the node list
put the divs from the new list
re add your even listener

jQuery slice - last result

Lets say I have 100 divs and I want to show 5 divs each time.
onclick - I'm loading 5 more.
Any idea how to check if I reached the last div?
<div id="results">1</div>
<div id="results">2</div>
<div id="results">3</div>
<div id="results">4</div>
<div id="results">100</div>
$(function () {
$("results").slice(0, 5).show();
$("#moreresults").on('click', function(e){
e.preventDefault();
$("div:hidden").slice(0, 5).slideDown();
});
});
Load More

First of all the id attribute should be unique in the same document, so use common classes instead, e.g :
<div class="results">1</div>
<div class="results">2</div>
<div class="results">3</div>
<div class="results">4</div>
...
You could use index's with the help of the jQuery selectors lt() and gt(), check the working example below.
Hope this helps.
$(function () {
var number = 5;
var count = $('.results').length;
//Show just 5 first and hide the rest
$(".results:gt("+(number-1)+")").hide();
//Attach the click event
$("#moreresults").on('click', function(e){
e.preventDefault();
//Increment the 'number'
number = number+5;
//Show 'number' of element
$(".results:lt("+number+")").slideDown();
//Check if all divs are loaded
if( number >= count ){
console.log('All the divs are loaded');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">1</div>
<div class="results">2</div>
<div class="results">3</div>
<div class="results">4</div>
<div class="results">5</div>
<div class="results">6</div>
<div class="results">7</div>
<div class="results">8</div>
<div class="results">9</div>
<div class="results">10</div>
<div class="results">11</div>
<div class="results">12</div>
<div class="results">13</div>
<div class="results">14</div>
<div class="results">15</div>
<div class="results">16</div>
<div class="results">17</div>
<div class="results">18</div>
<div class="results">19</div>
<div class="results">20</div>
Load More

You can check to see if the last div is visible
if($('div:last').is(":visible")) {
//do things here
}

I made an working example for you here
First you have to use class not id on the 'results', and use $(".results:lt(5)")

Using last() and is():
var $results = $('.results');
$results.slice(5).hide();
$('#moreresults').click(function(e){
e.preventDefault();
var $nextResults = $results.filter(':hidden').slice(0,5).slideDown()
if( $nextResults.last().is( $results.last() ) ){
$(this).hide();
console.log('Last one')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">Item 1</div>
<div class="results">Item 2</div>
<div class="results">Item 3</div>
<div class="results">Item 4</div>
<div class="results">Item 5</div>
<div class="results">Item 6</div>
<div class="results">Item 7</div>
<div class="results">Item 8</div>
<div class="results">Item 9</div>
<div class="results">Item 10</div>
<div class="results">Item 11</div>
<div class="results">Item 12</div>
<div class="results">Item 13</div>
Load More

Assign multiple elements random size and random placement, while following the sequential div order

Trying to figure out somekind of logic that will let me distribute elements in a sequenced order. What size and position should be randomly generated within a given range (for example, element must be within viewport and the size of the element should be within a defined range such as minimum 10% of viewport, maximum 60%).
I'm not sure what would be the best way to approach something like this, any ideas?
I've attached a sketch below of what it could look like. The layout would be different at each load.
Markup
<div class="container">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
<div class="post">Post 8</div>
<div class="post">Post 9</div>
<div class="post">Post 10</div>
<div class="post">Post 11</div>
<div class="post">Post 12</div>
<div class="post">Post 13</div>
<div class="post">Post 14</div>
<div class="post">Post 15</div>
</div>

Thanks, this was fun to code. I set some defaults in CSS and then did the logic in JS. Note that the buffer() function is nonlinear; we want most of the buffers to be close to zero and very few of them to be on the larger side, so we use powers of e (2.7⁰/12 = 0.08em to 2.7⁶/12 = 33.62em) for the scale and then multiply them out to get a bigger range of numbers (rather than powers of two divided by 12).
I assume the elements are already chronologically ordered. If not, that shouldn't be hard to do, just sort posts[] and insert them in order using appendChild() on the container.
var defaultMax = Math.exp(6) / 12; // e⁶ / 12 = 33.5em
// random buffer to give for spacing.
// growth is inverse exponential, so larger is less likely
function buffer(min=0.1, max=defaultMax, mult=1) {
return Math.min(max, Math.max(min,
min / 2 + Math.exp(Math.random() * 6) * Math.random() * mult / 12
))+"em";
}
function randomize() {
var posts = document.getElementsByClassName("posts");
for (var p = 0; p < posts.length; p++) {
// random buffered margins, ordered: top right bottom left.
// top is at least 0.1em, right and bottom are at least 0.25em.
// top and bottom are cut in half to limit lost vertical space.
posts[p].style.margin = buffer(0.1, defaultMax, 0.5) + " "
+ buffer(0.25) + " "
+ buffer(0.25, defaultMax, 0.5) + " "
+ buffer();
// random width and height (with sane minimum size: 8em x 5em)
posts[p].style.width = buffer(8);
posts[p].style.height = buffer(5);
}
}
.posts { float:left; background:#000; color:#fff;
padding:0.2em; text-align:center; }
.container { width:50em; max-width:100%; }
<body onload="randomize()">
<div class="container">
<div class="posts">Post 1</div>
<div class="posts">Post 2</div>
<div class="posts">Post 3</div>
<div class="posts">Post 4</div>
<div class="posts">Post 5</div>
<div class="posts">Post 6</div>
<div class="posts">Post 7</div>
<div class="posts">Post 8</div>
<div class="posts">Post 9</div>
<div class="posts">Post 10</div>
<div class="posts">Post 11</div>
<div class="posts">Post 12</div>
<div class="posts">Post 13</div>
<div class="posts">Post 14</div>
<div class="posts">Post 15</div>
</div>
</body>

So I've used Adams code as a base. So HTML and CSS stay the same:
HTML
<body onload="randomize()">
<div class="container">
<div class="posts">Post 1</div>
<div class="posts">Post 2</div>
<div class="posts">Post 3</div>
<div class="posts">Post 4</div>
<div class="posts">Post 5</div>
<div class="posts">Post 6</div>
<div class="posts">Post 7</div>
<div class="posts">Post 8</div>
<div class="posts">Post 9</div>
<div class="posts">Post 10</div>
<div class="posts">Post 11</div>
<div class="posts">Post 12</div>
<div class="posts">Post 13</div>
<div class="posts">Post 14</div>
<div class="posts">Post 15</div>
</div>
</body>
CSS:
.posts { float:left; background:#000; color:#fff; padding:0.2em; text-align:center; }
.container { width:50em; max-width:100%; }
JavaScript
Will change however. Update any of the properties in the options variable to change layout.
var options = {
width: {
min: 10,
max: 60,
unit: '%'
},
height: {
min: 10,
max: 30,
unit: '%'
},
margin: {
min: 5,
max: 10,
unit: 'px'
}
}
function getRandomInt (min, max, unit) {
return Math.floor(Math.random() * (max - min + 1)) + min + unit;
}
function randomize() {
var posts = document.getElementsByClassName("posts");
for (var p = 0; p < posts.length; p++) {
posts[p].style.margin = getRandomInt(options.margin.min,options.margin.max, options.margin.unit) + " " + getRandomInt(options.margin.min,options.margin.max, options.margin.unit);
posts[p].style.width = getRandomInt(options.width.min,options.width.max, options.width.unit);
posts[p].style.height = getRandomInt(options.height.min,options.height.max, options.height.unit);
}
}
I've created a fiddle: http://jsfiddle.net/qsUw7/

Paging javascript

I'm trying to make a simple hard coded paging system via html and javascript.
I have given each element an id PM-1, PM-2, PM-3, etc and each page will list 10 of these items.
(I know this is a very inconvenient paging system but it's just for experimental purposes.)
So. my code html is as listed below -
<div id="PM-22">item 1</div>
<div id="PM-21">item 2</div>
<div id="PM-20">item 3</div>
<div id="PM-19">item 4</div>
<div id="PM-18">item 5</div>
<div id="PM-17">item 6</div>
<div id="PM-16">item 7</div>
<div id="PM-15">item 8</div>
<div id="PM-14">item 9</div>
<div id="PM-13">item 10</div>
<div id="PM-12">item 11</div>
<div id="PM-11">item 12</div>
<div id="PM-10">item 13</div>
<div id="PM-9">item 14</div>
<div id="PM-8">item 15</div>
<div id="PM-7">item 16</div>
<div id="PM-6">item 17</div>
<div id="PM-5">item 18</div>
<div id="PM-4">item 19</div>
<div id="PM-3">item 20</div>
<div id="PM-2">item 21</div>
<div id="PM-1">item 22</div>
<span style="text-align:right;"><p>Page 1 2 3</p></span>
And my javascript function as as follows -
<script type="text/javascript">
function PMPaging(num,pg) {
pg *= 10;
var upperlim = num - pg - 10;
var lowerlim = upperlim - 10;
if(lowerlim < 0) { lowerlim =0;}
for(num; num > 0; num--) {
document.getElementById('PM-'+num).style.display = 'none';
while (num <= upperlim && num > lowerlim) {
document.getElementById('PM-'+num).style.display = 'block';
num--;
}
}
}
</script>
Assume first 10 items are showing only on page load and the rest are hidden - Now whenever I run this code, it does show the first 10 items only, but when i click page 2 or 3 nothing happens, and if I click page 1 it shows the last 2 items? wtf? lol, first page is id number "22-13" and second page is "12-2", third page should be "2-1"..Thanks!

Is there a reason you aren't using the JQuery Pagination Plugin? Have a look at the demonstration.
If you need to be able to link to a specific page, have a look at this answer.

I get your point. You can use this modified script for the same purpose. I hope it helps. (You don't have to change your html part.
<script type="text/javascript">
function PMPaging(num,pg) {
pg *= 10;
var upperlim = pg+1;
var lowerlim = upperlim - 10;
if(lowerlim < 0) { lowerlim =1;}
for(i=1; i <= num; i++) {
if(i<=upperlim && i>=lowerlim){
document.getElementById('PM-'+i).style.display = 'block';
}else{
document.getElementById('PM-'+i).style.display = 'none';
}
}
}
</script>

surround your items with this div:
<div class="itms">
<div id="PM-22">item 1</div>
<div id="PM-21">item 2</div>
<div id="PM-20">item 3</div>
<div id="PM-19">item 4</div>
<div id="PM-18">item 5</div>
<div id="PM-17">item 6</div>
<div id="PM-16">item 7</div>
<div id="PM-15">item 8</div>
<div id="PM-14">item 9</div>
<div id="PM-13">item 10</div>
<div id="PM-12">item 11</div>
<div id="PM-11">item 12</div>
<div id="PM-10">item 13</div>
<div id="PM-9">item 14</div>
<div id="PM-8">item 15</div>
<div id="PM-7">item 16</div>
<div id="PM-6">item 17</div>
<div id="PM-5">item 18</div>
<div id="PM-4">item 19</div>
<div id="PM-3">item 20</div>
<div id="PM-2">item 21</div>
<div id="PM-1">item 22</div>
</div>
<span style="text-align:left;"><p>Page 1 2 3</p></span>
then use this code for JS:
function Paginate(itemsPerPage) {
var items = document.querySelectorAll(".itms div"),
iL = items.length || 0;
this.turnPage = function(pageNum) {
var startItem = (pageNum*itemsPerPage) - itemsPerPage;
for (var i = 0; i < iL; i++) {
items[i].style.display = (startItem <= i && i < (startItem + itemsPerPage)) ? "block" : "none";
}
}
}
var P = new Paginate(10);//10 items per page
to turn pages, use:
P.turnPage(2); //2 for the page Number