I create 110 dynamic div, and 11 container dynamic div, each 10 div of 110 I put them in One container dynamic div 11, then I append the first div of 11 to div that has "allEl" id, this is my code:
var index = 0;
var divContener;
for (i = 0; i < 110; i++) {
if (i % 9 == 0) {
index++;
alert(index);
divContener = $("<div> </div");
divContener.attr('id', 'd' + index);
}
$('#d' + index).append("<div id='" + i + "'><a href=''><img src='" + smallImageArray[i] + "'/></a></div>");
$('#' + i).append("</br> Rate);
}
document.getElementById("#allEl").innerHTML = $("#d" + 1);
<div id="allEl">
<h1 id="carsCategory">All Cars</h1>
</div>
the problem is that the container div doesn't append to div that has "allEl" id,
What is the problem?
Try this:
<div id="allEl">
<h1 id="carsCategory">All Cars</h1>
</div>
<script src="js/jquery.min.js"></script>
<script>
var index = 0;
var divContener;
var allElem=$("#allEl");
for (var i = 0; i < 110; i++) {
if (i % 9 == 0) {
index++;
divContener = $("<div></div>");
divContener.attr('id', 'd' + index);
allElem.append(divContener);
}
$('#d' + index).append("<div id='" + i + "'><a href=''><img src='" + smallImageArray[i] + "'/></a></div>");
$('#' + i).append("</br> Rate");
}
allElem.append($("#d" + 1));
</script>
I hope this is what you were trying to achieve..
Related
The script below will loop through and generate 50 records. I have a dynamic value RANKS = "8". How can I check if 8 is exists in id="rankN"?
The value[RANKS] is dynamic from 1-50
var RANKS = "8";
var ranking;
for (var i = 0; i < rankingList.length; i++) {
var a = 1;
ranking = "<div > " +
("<div id=rank" + a + " class='RankCol'>" + rankingList[i].rankNo + "</div>") +
("<div>" + rankingList[i].username + "</div>") +
("<div>" + rankingList[i].winningAmt + "</div>") +
("<div> " + rankingList[i].uCoin + "</div>") +
(" </div>");
};
Expected result:
A
A
B
B
C
B
A
A
B
G
so if my ranking is 8, the text will bold. IF the value is not within 50, then i will do another css. my main problem is how can i check whether the looped' ID contains the id number same as my RANKS(which is 8)
If you want to check in DOM, then simply var exists = $('#rank8').length !== 0.
If you want it to check inside loop:
var ranks = {};
for (var i = 0; i < rankingList.length; i++) {
newRank = 'rank' + i;
if (typeof ranks[newRank] !== 'undefined') {
// skip
continue;
} else {
ranking = '<div id="' + newRank + '" ...';
}
ranks[newRank] = newRank;
}
Try this
rankingDiv.html(rankingList.map((rank,i) => `<div>
<div id="rank${i+1)" class='RankCol'>${rank.rankNo}</div>
<div>${rank.username}</div>
<div>${rank.winningAmt}</div>
<div>${rank.uCoin}</div>
</div>`);
const $myRank = $(`#rank${RANKS}`);
if ($myRank.length===1) myRank.html(`<b>${$myRank.text()}</b>`)
Older sugggestion
$(\`#rank${RANKS}\`).length===1
I getting the error "Attribute buttonindex not allowed on element a at this point". My code is
<p><a class="btn btn-success_ar hidden-xs" id="indexCarouselBeforeBtn2" buttonindex="2" role="button">HOVER HERE TO SEE BEFORE</a></p>
and my Script is
<script type="text/javascript" >
var imageList = [];
$(document).ready(function(){
var totalSlides = 5;
for (var i = 1; i <= totalSlides; i++) {
imageList[i] = [];
imageList[i][0] = $('<img />').attr('src', 'after/images/external/index' + i + 'after.jpg').attr('id', 'indexCarouselImg' + i);
imageList[i][1] = $('<img />').attr('src', 'after/images/external/index' + i + 'before.jpg').attr('id', 'indexCarouselImg' + i);
$("#indexCarouselBeforeBtn" + i).mouseenter(function(){
$("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
$("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][1]);
$(this).addClass('btnHover');
});
$("#indexCarouselBeforeBtn" + i).mouseleave(function(){
$("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
$("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][0]);
$(this).removeClass('btnHover');
});
$("#indexCarouselImg" + i).remove();
$("#item" + i).append(imageList[i][0]);
}
});
The error still exists even using P and Div tags instead of the a tag . How can I fix this.
I think that's attribute not exists in HTML.
You can use tabindex.
https://www.w3schools.com/tags/att_global_tabindex.asp
I have created a page where a list of members is shown. I created a Javascript function which shows the details of a user in a panel with id divpreview with position:absolute and z-index:100 the popup/panel does but I am not able to show it right above the the member.
<div runat="server" id="divpreview" class="preview">
</div>
<script type="text/javascript" language="javascript">
function showdiv(id, m, pos) {
var arr = new Array(7);
arr = id.split("###");
var divhtml = "";
divhtml += "<table border='1' style='background-color:#1C5E55;color:white;absolute' cellpadding='3' cellspacing='0'><tr><td>Sponsor Id</td><td>" + arr[0] + "</td></tr>";
divhtml += "<tr><td>Total Left Point</td><td>" + arr[1] + "</td></tr>";
divhtml += "<tr><td>Total Right Point</td><td>" + arr[2] + "</td></tr>";
divhtml += "<tr><td>Total Left Investment</td><td>" + arr[3] + "</td></tr>";
divhtml += "<tr><td>Total Right Investment</td><td>" + arr[4] + "</td></tr>";
divhtml += "<tr><td>Self Point </td><td>" + arr[5] + "</td></tr>";
divhtml += "<tr><td>Expiry Date</td><td>" + arr[6] + "</td></tr>";
divhtml += "</table>";
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").innerHTML = divhtml;
var left = m.clientX + 10;
if (pos == 1) {
left = m.clientX - 230;
}
else {
left = m.clientX + 10;
}
debugger;
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.left = left.toString() + 'px';
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.display = "block";
var top = 0;
top = document.documentElement.scrollTop + m.clientY - 50;
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.top = top.toString() + 'px';
}
function hidediv() {
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.display = "none";
}
function movediv(m, pos) {
var left = m.clientX + 05;
if (pos == 1) {
left = m.clientX - 200;
}
else {
left = m.clientX + 10;
}
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.left = left.toString() + 'px';
var top = 0;
top = document.documentElement.scrollTop + m.clientY - 50;
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.top = top.toString() + 'px';
}
</script>
I want the panel to appear near the stars. What should I do.
Use
position: relative;
to the parent div. Position absolute element will "stop" when finding the closest positioned relative or positioned absolute element.
use this style on divpreview
<div runat="server" id="divpreview" class="preview" style="position:absolute;z-index:999;">
</div>
position: absolute;
parent div Position 'absolute'.
I've been stuck with this for several days and I can't solve it.
I've done it with jQuery with no problem, but I need it in pure JS.
This is how my list is generated.
function get_friends(items){
if(items != undefined){
if (items.length != 0){
var html_friends_list = "";
for(var count = 0; count < items.length; count++){
if(items[count].subscription == "both"){
var display_name = Strophe.getNodeFromJid(items[count].jid);
html_friends_list = html_friends_list + "<li style='font-size:19px' id='open_chat-" + items[count].jid + "'>" + "<a href='chat-js/index.html'>" + display_name + "<span class='block-list-label' id='" + items[count].jid + "_unread_messages" + "'>0</span><span class='block-list-label' id='" + items[count].jid + "_change_status" + "'></span></a></li>";
}
}
document.getElementById("friends-list").innerHTML = html_friends_list;
As a said I want to save the value of the text and the id of any li element clicked.
Regards
you haven't specified whether this is for a specific list or just any li on your page. The below will log the id and innerHTML components of any li on the page. Perhaps you may need to update the querySelector for your particular use case.
var list = document.querySelectorAll('li');
Array.prototype.slice.call(list).forEach(function(listItem){
listItem.addEventListener('click', function(e){
console.log(this.id);
console.log(this.innerHTML);
});
});
Here's a JSFiddle which I think demonstrates what you are trying to achieve.
Jsfiddle
Combination of james' answer and working example.
function get_friends(items) {
if (items != undefined) {
if (items.length != 0) {
var html_friends_list = "<ul>";
for (var count = 0; count < items.length; count++) {
if (items[count].subscription == "both") {
html_friends_list = html_friends_list + "<li id='open_chat-" + items[count].jid + "'>"+ items[count].display_name +"</li>";
}
}
html_friends_list = html_friends_list + '</ul>'
document.getElementById("friends-list").innerHTML = html_friends_list;
}
}
}
Note: you should trigger prototype after your dom element created.
UPDATE:
I changed my script to this and it works. Way simpler and it works.
function myFunction(valor) {
var elementos = document.getElementsByClassName("inner");
var i;
for (i = 1; i < elementos.length+1; i++) {
document.getElementById("age"+i).style.visibility = "hidden";
}
document.getElementById("age"+valor).style.visibility = "visible";
}
I have this script:
function myFunction(valor) {
alert("Has seleccionado " + valor);
var elementos = document.getElementsByClassName("inner");
//alert ("Tienes " + elementos.length + " elementos.");
var i;
for (i = 1; i < elementos.length + 1; i++) {
var sty = document.getElementById("age" + i);
//alert("age"+i);
if (getComputedStyle(sty).getPropertyValue("visibility") == "hidden") {
document.getElementById("age" + valor).style.visibility = "visible";
} else {
document.getElementById("age" + i).style.visibility = "hidden";
}
}
}
That I control with a slider control. What I'm doing is hiding or showing some divs with depending of what I choose from the slider.
This is how I paint my data before trying to hide or shsow elements with the slider:
$(window).load(function() {
$.getJSON('http://xxxxx/xxxxx.json', function(data) {
var output = "<ul class='lista'><div class='outer'>";
for (var i in data.lbclassic) {
output += "<div style='visibility:hidden;' class='inner'id=" + "age" + data.lbclassic[i].ageinweeks + ">" + "<p>" + data.lbclassic[i].ageinweeks + "--" + data.lbclassic[i].cumul + "--" + data.lbclassic[i].perhh + "--" + data.lbclassic[i].perhd + "--" + data.lbclassic[i].eggweightinweek + "--" + data.lbclassic[i].eggmasscumul1 + "--" + data.lbclassic[i].eggmassinweek + "--" + data.lbclassic[i].eggmasscumul + "</p></div>";
}
output += "</div></ul>";
document.getElementById("placeholder").innerHTML = output;
});
});
This works great until one point - once I get to the last element (90 in this case), it won't show up.
Isn't it more easy to use the css "display:none;" feature for hidding your element.
.yourclass{
display:none;
}
just edit the class with js
Link to CSS
function myFunction(valor) {
var elementos = document.getElementsByClassName("inner");
var i;
for (i = 1; i < elementos.length+1; i++) {
document.getElementById("age"+i).style.visibility = "hidden";
}
document.getElementById("age"+valor).style.visibility = "visible";
}