I have the following code:
for (i = 0; i < 13; i++){
$('.players').append('<div class="rule_dropdown"><select name="rule' + i + '">');
for(j = 0; j < rules.length; j++){
$('.players').append('<option>' + rules[j] + '</option>');
}
$('.players').append('</select></div>');
}
I want to have 13 dropdown lists with the same content. I expect this to happen:
First for loop add an opening div and select
For each rule in rules array, append an option
Add closing select and closing div
Go back to #1
But this is what actually happens:
First loop add opening AND closing div and select.
Second loop add option with the right content
Does anyone know why?
I think this is what you want to do..
var rules=[1,2,3,4,5,6];
for (i = 0; i < 13; i++){
$('.players').append('<div class="rule_dropdown"><select id="rule'+ i +'" name="rule' + i + '">');
for(j = 0; j < rules.length; j++){
$('#rule'+i).append('<option>' + rules[j] + '</option>');
}
$('.players').append('</select></div>');
}
I think append adds a full element to the DOM rather than just adding the text into the HTML as it were. Try building up your elements individually and adding them a bit like this:
for (i = 0; i < 13; i++){
var $select = $('<select name="rule' + i + '"></select>');
for(j = 0; j < rules.length; j++) {
$select.append('<option>' + rules[j] + '</option>');
}
var $div = '<div class="rule_dropdown"></div>';
$div.append($select);
$('.players').append($div);
}
From the documentation:
The .append() method inserts the specified content as the last child of each element in the jQuery collection.
The options you want to add should be the child elements of the select, not the div.
Related
I have an img_urls array which contains 2 image urls.
I use this array to loop img tag and using for loop.
But instead of having 2 images, i have 3 images in my output.
This is my code;
var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];
for (i = 0; i < img_urls.length; i++) {
$("div").append(
"<div><img src=' " + img_urls[i] + "'/></div>"
);
}
So, whats is wrong with my code?
JSFIDDLE
When adding the first image you generate a new div.
Then the second image if appended to existing divs.
You should have only one destination div. Add an id to the main div:
<div id="container"></div>
--
var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];
for (i = 0; i < img_urls.length; i++) {
$("div#container").append(
"<div><img src=' " + img_urls[i] + "'/></div>"
);
}
You need to use selector i.e. id class in the main div as when the next iteration occurs it contains two div in the body. Check this fiddle
Problem is that you have $("div") as selector. So when you append the first image, you also add new div. So the next image is appended to two divs. Probably you can add id to your div, so
<div id="test"></div>
...
$("#test").append
Reason is you are appending everything inside the loop.
$(function() {
var img_urls = ["url1", "url2"];
var html= ""
for (i = 0; i < img_urls.length; i++) {
html += "<div><img src=' " + img_urls[i] + "'/></div>";
}
$("div").append(html);
});
You are appending to global div element, you are appending div also, so generated html will append to generated div too.
Here is html,
<div class='test'></div>
Here is javascript code,
$(function() {
var img_urls = ["image_url1", "image_url2"];
var html = '';
for (i = 0; i < img_urls.length; i++) {
html += "<div><img src=' " + img_urls[i] + "'/></div>"
}
$("div.test").append(html);
});
Please find here working link here
I hope this will help
<div id="container"></div>
for (var i = 0; i < img_urls.length; i++) {
console.log(img_urls.length)
$("div#container").append(
"<div><img src=' " + img_urls[i] + "'/></div>"
);
}
when you append the first image you create a div in that div the horse is added and the first div is also populated by the horse
Try this and see Demo
<div></div>
$(function() {
var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];
for (i = 0; i < img_urls.length; i++) {
$("div").append(
"<img src=' " + img_urls[i] + "'/> </br>"
);
}
});
I need to create a set amount of buttons using jquery. I've tried a for loop and a while loop but this isn't working.
I'm storing the amount of pages I need in a variable 'pages', which when using console.log(pages) correctly shows how many buttons I require yet I still can't get the loop to work.
while (i <= pages) {
pageButtons.append('<input type="button" id="button'+i+'" value="Random'+i+'"/>');
i = i + 1;
}
I currently have the above code..
What is pageButtons assigned to? If you contain all of the buttons in a div, this will work
var pages = 5;
var pageButtons = $('#pageButtons');
for (var i = 0; i < pages; i++) {
pageButtons.append('<input type="button" id="button' + i + '" value="Random' + i + '"/>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageButtons">
</div>
You would want to do something like this:
var pages = 5;
for (var i = 0; i <= pages; i++) {
$('#buttons').append('<input type="button" id="button' + i + '"value="Random' + i + '"/>');
}
http:////jsfiddle.net/clccmh/x545y8re/
I want to add class " hidden" in many divs of the same id.
function show_wzorce(x) {
document.getElementById("" + x + "").className += " hidden";
var divs = document.getElementById("" + x + "");
for (var i = 0; i < divs.length; i++) {
divs[i].className += " hidden";
}
}
ID has to be unique. You can do the same thing but with getElementsByClassName (there is a "s" after element)
Your code should look something like this:
function show_wzorce(x) { // assuming x is string
var divs = document.getElementsByClassName(x); //this returns an HTML Collection. But works as an array
for (var i = 0; i < divs.length; i++) {
divs[i].className += " hidden";
}
}
I try to create a dynamic menu using jquery:
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
main.append("<li>");
$('li').append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>");
main.append("</li>");
}
}
The menu is created, but in each li i get more than one span, there is an "inside" loop (I think...)
createing more spans than needed... how can i solve/control it so each li gets
one span according to the for - loop index ?
You are seeing that behaviour because you are appending that anchor with span in selecting all the li elements.
Try,
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
var xLi =("<li>").appendTo(main);
xLi.append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>");
main.append(xLi);
}
}
you can do it simply as below
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
main.append($("<li>").append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>"));
}
}
$('li') this selector will get every li on the html so every time you iterate to create a new li element you gonna add a new span to all of them.
Try like this:
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
var menuLine = $('<li>');
menuLine.html("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + " </span></a>" );
main.append(menuLine);
}
}
I am creating a popup menu with jQuery with some buttons. Number of buttons is flexibel. For each item in the variable 'items' there is one button. The problem: If the button is clicked I want to know to which item it belongs to.
In other programming languages there is a so called 'tag'-field where you can put an integer or an object for identification. What is the best way in jQuery?
var popup = $('<div />');
for (var i = 0; i < items.length; i++)
{
var btn = $('<div>' + items.Name + '</div>').appendTo(popup).button().click(
function(e) {
// alert($(e.target).tag);
popup.hide();
}
);
// btn.tag = i;
}
Try looking at .data(). This will allow you to store information associated with a key for any element.
var popup = $('<div />');
for (var i = 0; i < items.length; i++)
{
var btn = $('<div>' + items.Name + '</div>').appendTo(popup).button().click(
function(e) {
// alert($(e.target).tag);
popup.hide();
}
);
btn.data("index", i);
}
You can the retrieve the information using btn.data("index") where btn is a jQuery object containing the element.
Update - Accessing the element that has been clicked within a function
The this keyword will refer to the html element that has been clicked. You could alert the stored data using:
function(e){
alert($(this).data("index"));
}
You can use the "data-" attribute...
var popup = $('<div />');
for (var i = 0; i < items.length; i++)
{
var btn = $('<div ' + 'data-tag="' + i + '">' + items.Name + '</div>').appendTo(popup).button().click(
function(e) {
// alert($(e.target).tag);
alert($(this).data("tag"));
popup.hide();
}
);
// btn.tag = i;
}