I need to search through multiple siblings to add a class the next and previous divs. Right now, the class is being added to the next div but only the next div if it's a sibling. Here is my HTML:
jQuery('.next').click(function() {
var newImg = jQuery('.currentimg').next('.thumbnail').css('background-image');
newImg = newImg.replace('url(','').replace(')','').replace(/\"/gi, "");
var oldImg = jQuery('.currentimg');
jQuery(oldImg).next('.thumbnail').addClass('currentimg');
jQuery(oldImg).removeClass('currentimg');
jQuery('.featured-image').html('<img src="'+newImg+'"><div class="button prev"><span><</span><span><</span></div><div class="button next"><span>></span><span>></span></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="thumbnail currentimg">1</div>
<div class="thumbnail">2</div>
</div>
<div class="wrap">
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
</div>
<div class="wrap">
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
</div>
<div class="wrap">
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<div class="next">next</div>
<div class="previous">prev</div>
Possibly something like this. It should let you find next regardless if they are siblings or not. Added a background color to easy see which one is current.
var allThumbnails = $('.thumbnail');
$('.next').click(function() {
var currentImg = allThumbnails.filter('.currentimg');
var nextIndex = (allThumbnails.index(currentImg) + 1) % allThumbnails.length;
var nextImg = allThumbnails.eq(nextIndex);
var newImg = nextImg.css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");
currentImg.removeClass('currentimg');
nextImg.addClass('currentimg');
$('.featured-image').html('<img src="' + newImg + '"><div class="button prev"><span><</span><span><</span></div><div class="button next"><span>></span><span>></span></div>');
});
.currentimg {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="thumbnail currentimg">1</div>
<div class="thumbnail">2</div>
</div>
<div class="wrap">
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
</div>
<div class="wrap">
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
</div>
<div class="wrap">
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<div class="next">next</div>
<div class="previous">prev</div>
Related
Hi I am new to the world of Greasemonkey and JavaScript..
I want to replace every onclick function with a part of its related img src link
the source looks like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
i want to replace the onclick 'playvid' a1a1a1a1a1 & b2b2b2b2bb2 & c3c3c3c3c3c3 ... with part of img src link
to become like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('EFGH',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
Here's what i've tried so far:
var els = $("#playlist_container");
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
for(var i=0;i<els.length;i++){
var el = els[i];
el.innerHTML = el.innerHTML.replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + cod +"'");
}
this works for me but the issue is that it puts the first cod 'ABCD' to all the following 'playvid()' functions as shown below:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('ABCD',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
another issue is when i try $("#video_container") it doesnt work i dont know why, I'm very confused and can't find anything on it
Your html has duplicate ID values which can cause issues when finding the correct element. Try using class if you want to target multiple elements.
This code only gets the first element value
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
Try this code and let me know how it goes
var images = $("div.thumbnail img");
images.each(function(img) {
var name = $(this).prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
var container = this.closest("div.video_container");
var evt = $(container).attr("onclick").replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + name +"'");
$(container).attr("onclick", evt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playlist_container">
<div class="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div class="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 1</div>
</div>
<hr>
<div class="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div class="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 2</div>
</div>
I'm using the code below to wrap every 4 divs with class .wrap4 inside a div with class .wrapList
Js code:
function Wrap(){
var $children = $('.wrap4');
for(var i = 0, l = $children.length; i < l; i += 4) {
$children.slice(i, i+4).wrapAll('<div class="wrapList"></div>');
}
};
for example:
<div class="row">
<div class="wrap4">1</div>
<div class="wrap4">2</div>
<div class="wrap4">3</div>
<div class="wrap4">4</div>
<div class="wrap4">5</div>
<div class="wrap4">6</div>
<div class="wrap4">7</div>
</div>
Result:
<div class="row">
<div class="wrapList">
<div class="wrap4">1</div>
<div class="wrap4">2</div>
<div class="wrap4">3</div>
<div class="wrap4">4</div>
</div>
<div class="wrapList">
<div class="wrap4">5</div>
<div class="wrap4">6</div>
<div class="wrap4">7</div>
</div>
</div>
It works great, but if the divs before the wrapping are in two rows instead of one, for example:
<div class="row">
<div class="wrap4">1</div>
<div class="wrap4">2</div>
<div class="wrap4">3</div>
</div>
<div class="row">
<div class="wrap4">4</div>
<div class="wrap4">5</div>
<div class="wrap4">6</div>
<div class="wrap4">7</div>
</div>
The result will not respect the rows and it will move the 4 to the top row to complete a line of 4 divs, for example:
<div class="row">
<div class="wrapList">
<div class="wrap4">1</div>
<div class="wrap4">2</div>
<div class="wrap4">3</div>
<div class="wrap4">4</div> (this div belong to the row below)
</div>
</div>
<div class="row">
<div class="wrapList">
<div class="wrap4">5</div>
<div class="wrap4">6</div>
<div class="wrap4">7</div>
</div>
</div>
How can I make the code respect the rows?
Thank you very much!!!
You could iterate through your rows, performing the wrap only on children of each row:
function Wrap(){
var $rows = $('.row');
for (var h = 0, r; r = $rows[h]; h++) {
var $children = $(r).find('.wrap4');
for(var i = 0, l = $children.length; i < l; i += 4) {
$children.slice(i, i+4).wrapAll('<div class="wrapList"></div>');
}
}
};
Wrap();
.row {
background-color: silver;
border: 3px solid red;
}
.wrapList {
border: 1px solid black;
margin: 3px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="wrap4">1</div>
<div class="wrap4">2</div>
<div class="wrap4">3</div>
</div>
<div class="row">
<div class="wrap4">4</div>
<div class="wrap4">5</div>
<div class="wrap4">6</div>
<div class="wrap4">7</div>
<div class="wrap4">8</div>
</div>
You can select each row and then iterate through each row and look for wrap4 class and use wrapAll().
function Wrap(){
$('.row').each(function(){
var $children = $(this).find('.wrap4');
for(var i = 0, l = $children.length; i < l; i += 4) {
$children.slice(i, i+4).wrapAll('<div class="wrapList"></div>');
}
});
};
Wrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="wrap4">1</div>
<div class="wrap4">2</div>
<div class="wrap4">3</div>
</div>
<div class="row">
<div class="wrap4">4</div>
<div class="wrap4">5</div>
<div class="wrap4">6</div>
<div class="wrap4">7</div>
</div>
I have a set of DIVs that are displayed like a table, but aren't in an HTML table.
The structure is like this:
<div id="queryResult" style="display: block;">
<div class="rRow">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="clr"></div>
</div>
When displayed it looks something like this:
So what I want is to be able to sort the columns by clicking on the column header or something. I know there are jQuery/JavaScript libraries out there like sorttable but all the ones I find are expecting a HTML table.
Do I bite the bullet and just switch this over to a table, or is there another reasonable (easier) solution?
Here is a solution. I added some class to your html for more control.
HTML:
<div id="queryResult" style="display: block;">
<div class="rRow header">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">VDry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">38.100</div>
<div class="rCell4">18.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46623</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">31.100</div>
<div class="rCell4">29.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46145</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">ADry Transload</div>
<div class="rCell4">JKH co</div>
<div class="rCell4">42.100</div>
<div class="rCell4">16.48550</div>
</div>
<div class="clr"></div>
</div>
And here is a jQuery to do sorting:
jQuery:
$('.header').children('.rCell4').each(function(index){
$(this).click(function(){
var container = $('#queryResult');
var header = $('.header');
var cmpCols = [];
$('.body').each(function(){
cmpCols.push($(this).children('.rCell4').eq(index));
});
for(i=0; i<cmpCols.length-1; i++){
for(j=i; j<cmpCols.length; j++){
if(cmpCols[i].text() > cmpCols[j].text()){
var tmp = cmpCols[i];
cmpCols[i] = cmpCols[j];
cmpCols[j] = tmp;
}
}
}
container.html(header);
for(i=0; i<cmpCols.length; i++){
container.append(cmpCols[i].parent());
}
});
});
Working jsFiddle Example.
If you gave each of your <div class="rRow"> elements a unique id, you could reorder them using jQuery .insertAfter();
e.g. for
<div class="rRow" id="row1">
...
</div>
<div class="rRow" id="row2">
...
</div>
you use $('#row1').insertAfter('#row2'); to flip the position of the two rows.
Then you just need a function which will read each value in a particular "column" in response to an onclick event on the header, get the values in that column, sort them, and reorder the rows.
I want to calculate how many slides in a slideshow.
in JS:
var slides = $('document.getElementById("slide").getAttribute("data-slide").slide-new');
And in My HTML
<div class="slide" id="slide1" data-slide="0" data-stellar-background-ratio="0.5">
<div id="slideshow" >
<div class="slide-new">Some Text</div>
<div class="slide-new">Some Text</div>
<div class="slide-new">Some Text</div>
</div>
</div>
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div id="slideshow" >
<div class="slide-new">Some Text</div>
<div class="slide-new">Some Text</div>
<div class="slide-new">Some Text</div>
<div class="slide-new">Some Text</div>
</div>
</div>
I want to calculate How Many "Slide-new" there is "slide" variable.
In 'slides' variable I want 3 for first slideshow and 4 for second slideshow. But I can't get it...
Thanks
try this code
$('.slide').each(function(){
var slides = $(this).find('.slide-new').length
alert(slides);
});
Note: don't use same id more than one time in a page.
Assign class name to get the count of the class
$(document).ready(function() {
var slideCount = $('[data-slide]').length;
for (i = 1; i <= slideCount; i++) {
var t = $('#slide' + i + ' #slideshow').children().attr('class');
$("#text" + i).html(i + 'st Slide has' + $("." + t).length + 'slides' + '<br/>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="slide" id="slide1" data-slide="0" data-stellar-background-ratio="0.5">
<div id="slideshow">
<div class="slide-new">Some Text</div>
<div class="slide-new">Some Text</div>
<div class="slide-new">Some Text</div>
</div>
</div>
<div class="slide" id="slide2" data-slide="1" data-stellar-background-ratio="0.5">
<div id="slideshow">
<div class="slide-new1">Some Text</div>
<div class="slide-new1">Some Text</div>
<div class="slide-new1">Some Text</div>
<div class="slide-new1">Some Text</div>
</div>
</div>
<span id="text1"></span>
<span id="text2"></span>
Click here
Here is the update:
Update
I'm not sure if this is possible. I can't seem to even get started but I have the following HTML. Is it possible to click on a title (Column 1, Column 2 or Column 3) and have everything in the bodyModule get sorted?
<div class="moduleRowTitle">
<div class="column1">Column 1</div>
<div class="column2">Column 2</div>
<div class="column3">Column 3</div>
</div>
<div class="bodyModule">
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>
</div>
Clicking on column2 should sort as the following:
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>
Demo FIDDLE
Jquery
$(document).ready(function(){
$('.moduleRowTitle div').click(function(){
var vals = [];
var className=$(this).attr('class');
$( ".bodyModule ."+className).each(function(){
vals.push($(this).html());
});
vals.sort();
var i=0;
$( ".bodyModule ."+className).each(function(){
$(this).html(vals[i]);
i=i+1;
});
});
});
I hope this is what you expect