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>
Related
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
I have multiple divs that has the same class and 'itemprop' attribute and I need to be able to create a function that will return the Quantity (which in the example above is '5')
the catch here is that the structure you see above changes in other pages. In the example above, the Condition and the Color shows but on other pages those do not appear which means the structure changes except the class name and the attribute value of the 'itemprop'. See below:
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
How do I get the Quantity into a JavaScript function and return the value of 5? Without having to edit the code of the site itself?
I have been playing with this but I am sure this is completely and utterly incorrect.
function () {
var x = document.getElementsByClassName("SameClass").getAttribute("itemprop");
if (x = 'price')
{
var a = document.getElementsByClassName("SameClass").getAttribute("itemprop").innerText;
return a;
}
}
The following might work for you:
function getQty() {
var arr=document.getElementsByClassName("SameClass-value");
for(var i=0;i<arr.length;i++)
if (arr[i].getAttribute("itemprop") == 'qty') return arr[i].innerHTML;
}
Or, even shorter, you can do
function getQty() {
return document.getElementsByClassName("SameClass-value")
.find(d=>d.getAttribute("itemprop") == 'qty').innerHTML;
}
Sorry for the repeated edits. It's been a long day for me today and I was trying to quickly put something together on my little smartphone.
If the classes don't change, you can select all the relevant elements then get the value from the one you need.
function getQty() {
var qty;
document.querySelectorAll("div.SameClass-value").forEach(function(element) {
if (element.getAttribute("itemprop") === "qty") {
qty = element.innerText;
}
});
return qty;
}
console.log(getQty());
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
<div class="SameClass-value" itemprop="qty"> 5 </div>
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
</div>
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>
I am trying to do a feed in HTML like facebook or twitter that contains the content of database.
I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it.
Is that the best way to do a feed in HTML?
JavaScript
for(i=0 ; i < 5 ; i++){0
var item = $("#template2 div.item").clone();
item.getElementById("title").text("aaaa"); //4 testing
$("#main1").append(item);
}
HTML
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12"><hr></div>
</div>
</div>
</div>
clone() returns object that you can manipulate using jQuery.
$('#addFeed').click(function() {
addFeed();
})
function addFeed() {
var item = $("#template2 div.item").clone();
$(item).find("h3").html("New Feed");
$("#main1").append(item);
}
.feed {
border: 1px solid black;
width: 150px;
}
.item {
background-color: lightgreen;
}
.item:nth-child(odd) {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12">
<hr>
</div>
</div>
</div>
</div>
<div id="main1" class="feed">
</div>
<button id="addFeed">Add Feed</button>
I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.
I've added some Javascript to your snippet to make this happen.
You could change the math in this to make it 1-100 or something else.
function wellColorShade() {
var wells = document.getElementsByClassName("well");
for(var i = 0; i < wells.length; i++) {
var well = wells[i];
well.style.opacity = (well.innerHTML / 10);
}
};
wellColorShade();
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
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