I have a text
I want to append multiple divs but the id should be changed dynamically.
e.g:
<div id=first>text</div>
<div id=first0>text</div>
<div id=first1>text</div>
<div id=first2>text</div>
<div id=first3>text</div>
<div id=first4>text</div>
<div id=first5>text</div>
Any help? thanks..
Your title and question content seem to disagree with each other. I am assuming you are wanting to create div's where each id sequentially increments each time one is created?
$(function(){
var count = 0;
$('#append').click(function(){
$('#parent').append('<div id="first'+count+'">text</div>');
count++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="append">Add DIV</a>
<div id="parent"></div>
You can change it with .attr():
$('#first').attr('id', 'first6')
try to change the code to :
<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>
dont forget the id inside " " (id="first" not id=first)
now you can simply use jquery : $("#first").attr('id','first6');
If you were interested in how styling works.`
$(function(){
for (let i = 0 ;i < 10; i ++){
$('#foo').append('<div id="first'+i+'">text</div>');
}
});
#first4 {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>
Create a div with id=Container and the create 5 divs dynamically using following code
//using JavaScript
for(var i=0;i<5;i++){
var obj = document.getElementById("container");
obj.innerHTML += '<div id="first'+i+'"></div>';
}
Related
I got this error. I tried to dinamicly add some html tags by JS.. And there is a ID name is well what I need for addEventListener. But I dont know how to fix it.. If I change '#answer-' + i to .answers is working.. But this is not solution because I could click for any button without get the clicked ID..
Questions.prototype.displayQuestion = function() {
let answer = [];
questionDOM.innerHTML = this.question;
let correct = this.correct;
for(let i = 0; i < this.answer.length; i++){
answer.push(
`
<div id="answer-${i}" class="answer">
<h5>${this.answer[i]}</h6>
<div class="check"></div>
</div>
`
);
document.querySelector('#answer-' + i).addEventListener('click', function() {
if(i === correct) {
document.querySelector('#answer-' + correct).classList.add('animate__animated', 'animate__heartBeat');
} else if (i !== correct) {
document.querySelector('#answer-1').classList.add('animate__animated','animate__headShake')
}
})
}
answerDOM.innerHTML = answer.join('');
}
index.html
<body>
<div class="container">
<div class="question">
<div class="questionbox animate__animated animate__bounce">
<h2 id="question"></h2>
</div>
</div>
<div class="answers"></div>
</div>
<script src="app.js"></script>
You are pushing to your answers array but not actually adding the nodes to the dom. You want to do something like document.body.innerHTML += answer[i] before you try to get the element by id. I can also see that your loop won't execute because the length of answer is initially zero before you add to it within the loop. You need to add to answer before the loop or change the loop condition to <= this.answer.length <--- but that is an infinite loop
I try to implement tinyscrollbar (tinyscrollbar.js) into jquery mobile with data-role=page. On the first page it works perfectly fine. but on the second page, the bar is missing. until i clicked on inspect element. I tried tinyscrollbar_update(), update(0), slideToggle().promise()... non works. They all give me different kind of errors.
looks like this
<div class="scrollbar1">
<div class="scrollbar" style="height: 200px;">
<div class="track" style="height: 200px;">
<div class="thumb" style="top: 0px; height: 32.6530612244898px;">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">//text</div>
</div>
<div id="footerNavigation">
Back
Next
</div>
i copied the exact same code as above to my second page code:
<div id="theNextPage" data-role="page"><!--scrollbar code--></div>
and my javascript file:
$(document).ready(function() {
$('.scrollbar1').tinyscrollbar();
});
anybody has any idea how is that so? Any way to solve it?
I have found out away!
change the class into id.
class="scrollbar1" >> id="scrollbar1"
next page:
class="scrollbar2" >> id="scrollbar2"
$(document).ready(function() {
$('#scrollbar1').tinyscrollbar();
$('#scrollbar2').tinyscrollbar();
});
$(document).on("pageshow", "#theNextPage", function () {
var $scrollbar2 = $('#scrollbar2');
$scrollbar2.tinyscrollbar();
var scrollbar1 = $scrollbar2.data("plugin_tinyscrollbar")
$scrollbar2.update(0);
});
like this would be better
Is it possible to include div tags within a for loop in an asp.net page and assign its id dynamically so that I can refer a particular div tag with the assigned id in a jquery script.
I want to do something like below.
#for(var i = 0; i < projectCountGlobal; i++)
{
<div id="i" > // id should be assigned dynamically
<div id="ProjectImage">
</div>
<div id="ProjectName">
</div>
<div id="Experts">
<div id="ExpertImage">
</div>
<div id="ExpertName">
</div>
</div>
</div>
}
From the snippet it seems like you are doing razor view so you can simply do like this,
<div id="#i" >
that shall do the trick.
i you can do this using following code snippet:
$('.topopup').hover(function () {
for (var i = 0; i < 5; i++) {
$('body').append('<div id=' + i + '>a</div>');
}
})
// HTML code on page
<body>
Click Here
<div id="toPopup" style="display:none;">
<div id="popup_content">Rahul Deshmukh</div>
<div id="backgroundPopup"></div>
<div id="containerDiv"></div>
</div>
</body>
here i am appending div inside body tag for this you need to add min.js also in your peoject folder
here "topopup" is a anchor tag and on the mouse over of this anchor tag, i am adding div inside body tag.
Im using the jQuery Mobile Filter List:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
Is it possible to move the position of the input field so I can put it into a div already on my page?
Using jQuery's appendTo seems to work fine but its kind of a hacky solution. Thanks
this is what I found while searching for solution to a similar problem.
HTML code example:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
JS code example:
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
This way you can place your input text box anywhere on your page and it should properly filter a list of items you want.
JSFiddle DEMO: http://jsfiddle.net/cZW5r/30/
Hi i'm developping a simple listView that lists the column "firstname" of my table : i want to get the selected value (name) , i found this link but it shows he how to get the index and not the value of the selected item http://jsfiddle.net/w2JZU/
here's my code :
HTML:
<div id="popup-bg">
</div>
<div id="popup-box">
<div data-role="page" id="home">
<div data-role="header">
<h1>Players</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="artiste" >
</ul>
</div>
</div>
</div>
</section>
js :
function successCB()
{
db.transaction(queryDB, errorCB);
}
function queryDB(tx)
{
tx.executeSql('SELECT * FROM Players ', [], querySuccess, errorCB);
}
function querySuccess(tx, results)
{
var len = results.rows.length;
var dataset= results.rows;
$("#artiste").empty();
for (var i = 0; i < len; i++)
{ item = dataset.item(i);
$("#artiste").append( "<li data-theme='c'><a href='game.html'>
<img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );
}
There isn't a "value" for an item in a list using the li tag. However, you can get the text of what's in that list element using the jQuery .text() method. I've modified the jsfiddle you referenced to do exactly that: http://jsfiddle.net/Cht2e/
You might want to consider adding another attribute to the li tag, such as data-name (you can make up the attribute) and then you can get that via the jQuery .attr() method. For example, you might change you append code to do:
$("#artiste").append( "<li data-theme='c' data-name='"+item['firstName']+"'><a href='game.html'>
<img src='images/avatar.jpg'><h3>"+item['firstName']+"</h3></a></li>" );
And then attach your click handler like this:
$('#artiste').children('li').on('click', function () {
alert('Selected Name=' + $(this).attr('data-name'));
});
I don't think this is necessarily the best structure or approach to take, but it will accomplish what you're asking.