I am trying to use jquery clone() for displaying cards on my web page. When the page loads it has to clone card div based on the count of rooms in that particular location. I hardcoded count as roomcount. I tried using simple for loop as per https://stackoverflow.com/a/12835644/6915446, However it doubles the count of divs each time. Please provide me right inputs.
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-2">
<div class="card">
<h6 class="card-header">NC001
<ul class="card-header-pills pull-xs-right">
<span class="badge badge-primary" aria-hidden="true">2</span>
<!-- <span class="glyphicon glyphicon-user" aria-hidden="true"></span> -->
</ul>
</h6>
<div class="card-block" id="scrollCard">
<h4 class="card-title"></h4>
<!-- <p class="card-text">ICU : 12.00 AM</p>
<p class="card-text">VEN : 1.00 AM</p> -->
</div>
</div>
<script>
var roomcount = 3;
$(document).ready(function() {
for(var i=0; i< roomcount; i++) {
$(".col-lg-2").clone().appendTo(".row-fluid");
}
});
</script>
</div>
Thanks.
When the count is 2, it clones to display 4 divs:
When the count is 3, it clones to displays 8 divs:
I think you might be cloning an array?
After you have cloned
$(".col-lg-2")
once it becomes an array, so when you clone it again you get 4?
Try using
$(".col-lg-2:first").
Tom
When you select an element by it's class name, jquery returns an array of all the matching objects.
So once you've cloned an item with the same class name, the next time you call $(".col-lg-2"); it will actually fetch 2 items and clone them, and the next time it will fetch 4 items and clone them etc.
To avoid it (and as a best practice) you should cache the element you are cloning:
var roomcount = 3,
$cloned = $('.col-lg-2');
for(var i = 0; i < roomcount; i++) {
$cloned.clone().appendTo('.row-fluid');
}
that way you always clone just that one object you cached.
NOTE: make sure you don't have an id on the cloned object since you'll be creating multiple items with the same id and id should be unique
The clone() method makes a copy of selected elements, including child nodes, text and attributes.
You can save the value of $(".col-lg-2") in a variable, and clone it, these way you are improving performance as you are not going to query the DOM multiple times:
var roomcount = 3,
$colLg2 = $('.col-lg-2');
for(var i = 0; i < roomcount; i++) {
$colLg2.clone().appendTo('.row-fluid');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-fluid">
<div class="col-lg-2">
<div class="card">
<h6 class="card-header">NC001
<ul class="card-header-pills pull-xs-right">
<span class="badge badge-primary" aria-hidden="true">2</span>
<!-- <span class="glyphicon glyphicon-user" aria-hidden="true"></span> -->
</ul>
</h6>
<div class="card-block" id="scrollCard">
<h4 class="card-title"></h4>
<!-- <p class="card-text">ICU : 12.00 AM</p>
<p class="card-text">VEN : 1.00 AM</p> -->
</div>
</div>
</div>
</div>
Related
I wrote a function that dynamically creates a webpage for me based on a json database.
Now I want to add 2 functions:
If you click the like img (its got the id button) the like counter should increase on the webpage by 1. Pretty easy just a on(click) with jQuery variable++ and then .text(variable)
A sort function - based on the likes one item received, you should be able to sort it (most liked div first, 2nd, 3rd....
I can write it for each individually with individual variables when I give all the like buttons and outputs a separate id but I wanted to make it dynamic so if you add new data to json file it dynamically works with the like and sort function.
The likes are not saved anywhere for now.
Since sitting on it for 3h and google so much and so much stackoverflow I think I overloaded my brain with different stuff and now nothing seems to work ^^
function filmInsert(insert) {
$.each(film, function(i, data) { //.each statt loop
let box =
`<div class="boxwrapper">
<div class="imgbox">
<img src="${data.img}" alt="${data.titel}">
</div>
<div class="textbox">
<h3>${data.titel}</h3>
<p>${data.beschreibung}</p>
<p> <a id="button${data.id}">
<img src="img/budspencer_official.png"> Like
</a>
<span class="output${data.id}">${data.likes}</span>
</p>
</div>
</div>`;
insert.append(box);
});
}
I've added a container element for the boxwrapper items as I assume you have one and as it's better to have one instead of just adding the sorted items to the body of the HTML document.
$(document).on("click", ".textbox a", function() {
let likes = parseInt($(this).closest(".textbox").find("span").text());
$(this).closest(".textbox").find("span").text(likes + 1);
});
$("#sort").on("click", function() {
let divs = $(".boxwrapper")
let sorted = divs.sort(function(a, b) {
return $(a).find("span").text() < $(b).find("span").text() ? 1 : -1;
});
$(".container").html(sorted);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="boxwrapper">
<div class="imgbox">
<img src="example.gif" alt="Title">
</div>
<div class="textbox">
<h3>Titel</h3>
<p>Description</p>
<p> <a id="button1">
<img src="https://dummyimage.com/40x40/000/fff&text=1"> Like
</a>
<span class="output1">0</span>
</p>
</div>
</div>
<div class="boxwrapper">
<div class="imgbox">
<img src="example.gif" alt="Title">
</div>
<div class="textbox">
<h3>Titel 2</h3>
<p>Description 2</p>
<p> <a id="button2">
<img src="https://dummyimage.com/40x40/000/fff&text=2"> Like
</a>
<span class="output2">0</span>
</p>
</div>
</div>
</div>
<button id="sort">
Sort
</button>
I want to be able to iterate through my HTML code and pick every element that harbors the "data-" attribute and collect it's value. I have looked on the web and only found ways to collect data on specific data- elements. I need to get the data-* value without knowing the element name, and so I found the .children() jquery method. However I don't know how to implement it all together.
Here's a quick example of what I'm doing:
HTML:
<div data-example="master">
<div data-example="i">
<div data-example="a">
<span data-example="1"></span>
</div>
<div data-example="b">
<span data-example="2"></span>
</div>
</div>
<div data-example="ii">
<div data-example="c">
<span data-example="3"></span>
</div>
<div data-example="d">
<span data-example="4"></span>
</div>
</div>
</div>
JavaScript:
var master = [];
$("#master").children(function() {
var element = $(this);
var data = element.data('example');
master.push(data);
}
So for this particular example, I want my end-game to have the master array equal [i, a, 1, b, 2, ii, c, 3, d, 4].
But I'm not doing it right because nothing is happening when I trigger the JQuery event.
Use Attribute selector and apply Array.prototype.map over it.
console.log(Array.from($('[data-example]')).map(function(elem) {
return $(elem).data('example');
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-example="master">
<div data-example="i">
<div data-example="a">
<span data-example="1"></span>
</div>
<div data-example="b">
<span data-example="2"></span>
</div>
</div>
<div data-example="ii">
<div data-example="c">
<span data-example="3"></span>
</div>
<div data-example="d">
<span data-example="4"></span>
</div>
</div>
</div>
I'm trying to use Javascript's getAttribute to get the item price. I'm a huge noob so I just used getAttribute and changed the <h2> classes to the item prices. That only grabs the first item price though, how can I get it to grab all of the prices and store them as an array for sorting or something?
Here's some of my HTML:
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images\site_images\bag3.jpg" alt="" height="249" />
<h2 class="881.10">$881.10</h2>
<h5>Authentic New Gucci ($1690) Micro-GG "Vernice" Crossbody w/Strap #309617, NWT</h5>
<i class="fa fa-shopping-cart"></i>Add to Cart
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images\site_images\bag4.jpg" alt="" height="249" />
<h2 class="569.05">$569.05</h2>
<h5>AUTHENTIC NWT ($819) Gucci GG Large Brown Denim Tassell Tote #336660, w/Gft Rcpt</h5>
<i class="fa fa-shopping-cart"></i>Add to Cart
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images\site_images\bag5.jpg" alt="" height="249" />
<h2 class="559.00">$559.00</h2>
<h5>Authentic Gucci GG Micro-Guccissima Leather Tote #309613 w/Gft Rcpt,NWT</h5>
<i class="fa fa-shopping-cart"></i>Add to Cart
</div>
and
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
And here is my Javascript code I'm using to get the item prices:
function myFunction() {
var x = document.getElementsByTagName("H2")[0].getAttribute("class");
document.getElementById("demo").innerHTML = x;
}
I'm a huge novice as you can see, so please try to make your answers not so complex if you could. :) thanks!
Save the prices to an array, and then use .sort() to sort the array. Note that the .sort() function sorts alphabetically by default, so you have to write your own comparator function for integers. for example, to sort in ascending order:
function sortNumber(a,b) {
return a - b;
}
Once you have all the prices saved to an array, iterate through the array and convert them to numbers using a unary plus:
var items = document.getElementsByTagName("H2");
var prices = [];
for(var i = 0; i < items.length; i++){
prices.push( +items[i].getAttribute("class"));
}
Alternatively, you can use .parseInt().
see an example here: http://codepen.io/anon/pen/VeKyMe
Why would you store the value of the prices as a class attribute in the first place? By doing so, you are going against the main purpose of the class attribute, which is to group elements that share something in common.
I'd suggest using the same value for the class attribute for all the tags that contain a price, for example:
...
<h2 class="price">$111.11</h2>
...
<h2 class="price">$222.22</h2>
...
Then you can grab all the elements that belong to the same class, in one call, and iterate over them:
javascript:
var items = getElementsByClassName('price')
jQuery:
var items = $('.price')
If for any reason it is important to you to store the value in some attribute, you could use the custom data- attributes, for example:
<h2 class="price" data-value="111.11">$111.11</h2>
which could be accessed later:
javascript:
<element>.getAttribute('data-value')
jQuery:
<element>.data('value');
So if you have some free time:
This is a quite complex thing, or I'm just too naive, as I've been working for hours without getting the desired output/result, I wish you could help me if you have some free time.
Firstly this is the data I have, which is retrieved from a PHP newsfeed, so is not a static number of items:
<span class="dateclass">date1</span>
<span class="dateclass">date2</span>
<span class="dateclass">date3</span>
....and so on
<br>
<div class="contentclass">content1</div>
<div class="contentclass">content2</div>
<div class="contentclass">content3</div>
....and so on
I need to work with the classes and IDs, because is no php template engine so I can't call a single element, the code is distributed among several files, and the easier way to achieve what I need would be via javascript and their IDs / Classes
I need to get the following output by copying the data above and, with Javascript, tweak the data in order to achieve the final result, which should be:
<div class="frame">
<div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
<span class="timeline-date"> <span class="dateclass">date1</span> </span>
<div class="timeline-content"> <div class="contentclass">content1</div> </div>
</div>
<div class="frame">
<div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
<span class="timeline-date"> <span class="dateclass">date2</span> </span>
<div class="timeline-content"> <div class="contentclass">content2</div> </div>
</div>
<div class="frame">
<div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
<span class="timeline-date"> <span class="dateclass">date3</span> </span>
<div class="timeline-content"> <div class="contentclass">content2</div> </div>
</div>
The <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div> ones don't exist as data in order to "transform", yet those are part of the style and I'd need them as well, but I haven't gotten that far to actually worry about those :(
I know, what a change!, yet I've been close to the result, I've been using different modified versions of the following code:
setTimeout(function() {
var element = document.getElementById("unique_ID");
element.innerHTML = "";
Array.prototype.forEach.call(document.querySelectorAll(".contentclass"), function(e) {
var example = element.appendChild(e.cloneNode(true));
});
}, 300);
I'm not posting all the versions I've made because none of them were going nowhere, and none of them work :/ I don't think I even have a copy of those
So what I've tried unsuccessfully so far has been:
Adding IDs to <span class="timeline-date"> and <div class="timeline-content"> so I can manipulate them with js
Using a different div setups in order to achieve the final result by manipulating the js code, this means using the following div/HTML arrangement in order to paste the cloneNode results there with some added elements, such as var div = document.createElement('div'); with div.className += "frame";, etc. Yet nothing works.
I've tried adding an ID via javascript to a div created in the same code, something like this:
.....(a previously defined variable for counter, of course)
var div = document.createElement('div');
div.id = "id_frame"+counter;
counter++;
Yet it didn't work when I tried to send the results with getElementById and the ID generated with the counter
I'm about to give up, it has been quite complicated for me ;P ... Any suggestions? :(
As far as I could get was to something like this:
<div id="ID_unique">
<div class="frame">
<span class="timeline-date">date1</span>
</div>
<div class=" timeline-content">content1</div>
<div class="frame">
<span class="timeline-date">date2</span>
</div>
<div class=" timeline-content">content2</div>
<div class="frame">
<span class="timeline-date">date3</span>
</div>
<div class=" timeline-content">content3</div>
</div>
Which isn't actually that far from the final result if it wasn't for those <div class="frame"> that should cover the content tags as well :(
First thing i think you should do is get all dateClasses and contentclass, and then create your frame one by one:
var dateClasses = $('.dateClass'); // array of all your dateClasses
var contentClasses = $('.contentClasses'); // array of all your contentClasses
for(var i=0; i< Math.min(dateClasses.length,contentClasses.length); i++) {
var frame = $("<div>", {class: "frame"}); // create your frame node
var timeLineDate = $("<div">,{class: "timeline-date"});
var timeLineContent = $("<div">,{class: "timeline-content"});
//Append DateClass to your timeline-data:
timeLineData.append(dateClasses[i]);
//Append ContentClass to your timeline-content:
timeLineContent.append(contentClasses[i]);
//Append all to your frame
frame.append(timeLineData);
frame.append(timeLineContent);
}
I didnt run it or test it tough, but hope it will give you an idea on how to achieve what you want.
Hope it helped.
I have this bit of HTML code.
<div class="container">
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">35000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2101</span>
<span class="cabin">Economy</span>
<span class="price">40000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">22000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">14500</span>
</div>
</div>
How do I sort it -- based on price -- using Javascript? Please, don't ask me for my JS code. My only thought was to use the bubble sort algorithm. But then, bubble sort works only on sorted arrays and my HTML string isn't sorted. Any suggestions, pointers and / or code will be appreciated.
Create an array and insert for each element 2 fields, the HTML element and the price, sort the array, re-insert the elements after sorting to conainer after make it empty:
var elements = document.querySelectorAll('.single-result');
var sortable = [];
for (i=0;i<elements.length;i++){
sortable.push([elements[i], elements[i].querySelector('.price').textContent]);
}
sortable.sort(function(a, b) {return a[1] - b[1]});
container = document.querySelector('.container');
container.innerHTML = "";
sortable.forEach(function(item) {
container.appendChild(item[0]);
});