how to search for exactly "-p" in the ids of huge html and append a counter after it i.e -p+counter. Please help.
If what you're asking is to replace -p with -pXX in all ids where XX is an increasing counter, you can do it like this:
var id, counter = 1;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
id = elems[i].id;
if (id && id.indexOf("-p") != -1) {
elems[i].id = id.replace("-p", "-p" + counter++);
}
}
If you're just trying to add the text "+counter", then you can do it this way:
var id;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
id = elems[i];
if (id && id.indexOf("-p") != -1) {
elems[i].id = id.replace("-p", "-p+counter");
}
}
If what you want (your original post is not very clear) is to replace only id values where the whole id is "-p", then you can use this:
var counter = 1;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
if (elems[i].id == "-p") {
elems[i].id += counter++);
}
}
OK, fourth guess at what you want (based on your comments) if you want -p replaced only if the p isn't followed by another letter:
var id, counter = 1;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
id = elems[i].id;
if (id) {
elems[i].id = id.replace(/\-p([\W_]|$)/, "-p" + counter++ + "$1");
}
}
And, here's a demo: http://jsfiddle.net/jfriend00/Ug7VN/
A jQuery version of this last one would work like this:
var counter = 1;
$('[id]').each(function() {
this.id = this.id.replace(/\-p([\W_]|$)/, "-p" + counter++ + "$1");
});
With jQuery, this should be as simple as:
var counter = 0;
$('[id*="-p"]').each(function() {
$(this).attr('id', $(this).attr(id).replace('-p', '-p' + counter++));
});
Edit: if you only want items with an id ending in -p, you can use the following (note the different selector):
var counter = 0;
$('[id$="-p"]').each(function() {
$(this).attr('id', $(this).attr(id).replace(/-p$/, '-p' + counter++));
});
Related
var dbRefObjectHis = firebase.database().ref('Box1').child('history');
dbRefObjectHis.on('value',gotData, errData);
function gotData(data) {
var ref = d3.selectAll('.His');
for (var i = 0; i < ref.length; i++){
ref[i].remove();
}
var history = data.val();
var keys = Object.keys(history);
for (i = 0; i < keys.length; i++) {
var k = keys[i];
var humidity = history[k].humidity;
var temperature = history[k].temperature;
$('.His').append('Humidity:' + humidity + 'Temperature:' + temperature );
}
This happens when the element you are trying to remove is not a removable Node.
try replacing
for (var i = 0; i < ref.length; i++){
ref[i].remove();
}
with
ref.forEach(function(e) {
e.remove();
});
I need to change a calculation from input name(s) to input id(s).
The old input name was "ef-fee".
The new id is "ef-fee_" +[i]);
The old code using input names:
<script async> //Entrance Fees
function findTotalEF(){
var arrEF = document.getElementsByName('ef-fee');
var totEF=0;
for(var i=0; i<arrEF.length; i++){
if(parseInt(arrEF[i].value)) totEF += parseInt(arrEF[i].value);}
document.getElementById('totalEF').value = totEF;
}
This is the new code which doesn't work:
<script async> //Entrance Fees
function findTotalEF(){
var totEF=0;
for (i=0; i <=48; i++)
if ($('#ef-fee_' + i > 0)) {totEF += "ef-fee_" +[i].val;} // This line is not correct. Can someone please fix it?
document.getElementById('totalEF').value = totEF;
}
Should do what you are needing
function findTotalEF() {
var totEF = 0;
for (var i = 0; i <= 48; i++) {
var $input = $('#ef-fee_' + i);
var value = parseInt($input.val()) || 0;
totEF += value > 0 ? value : 0;
}
$('#totalEF').val(totEF);
}
I am using the below code to convert the blockquote to the options of select element.
Please help to make it right as each option. Thank you.
["Yes ↵No", "one ↵two ↵three ↵four", "person 1 ↵person 2"]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var data = arr[i].split('\r\n');
newArr.push(data);
}
for (var j = 0; j < newArr.length; j++) {
$('#metadata-field').append('<select name=""></select>');
if (newArr[j].length) {
for (var k = 0; k < newArr[j].length; k++) {
$('#metadata-field select').append('<option>' + newArr[j][k] + '</option>');
}
} else {
alert('No data');
}
}
Try this : You need to split array element using ↵ and then append each element using one loop only and not nested loop. See below code -
var arr = ["Yes ↵No", "one ↵two ↵three ↵four", "person 1 ↵person 2"]
for (var i = 0; i < arr.length; i++) {
var data = arr[i].split(' ↵');
//create select box
var $select = $('<select id="' + i + '"></select>');
$('#metadata-field').append($select);
for(var k=0;k<data.length;k++)
{
//append options in select box
$select.append('<option>' + data[k] + '</option>');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="metadata-field"></div>
I have several elements with the className "error", I need to dynamically add a unique id to each one. From other questions on stack I have put together the following code but it doesn't seem to work.
function setErrorId() {
var errorClass = document.getElementsByClassName('error');
for (i = 0; i < errorClass.length; i++) {
var idName = 'error' + i;
errorClass[i].id = idName;
}
you have an undefined variable i. just define it but other than that your fine.
function setErrorId () {
var errorClass = document.getElementsByClassName('error')
, i = 0
, l = errorClass.length;
while (i < l) {
errorClass[i].id = 'error' + i++;
}
}
You're missing a }
like this:
function setErrorId() {
var errorClass = document.getElementsByClassName('error');
for (i = 0; i < errorClass.length; i++) {
var idName = 'error' + i;
errorClass[i].id = idName;
}
}
Can you help me getting this:
$(document).ready(function() {
$("#large").attr("src",bilder[0]);
$.each(bilder, function(i) {
$("#gallery .large").append("<div class='small'><table><tr><td><img src='"+bilder[i]+"' /></td></tr></table></div>");
});
$(".small td").mouseover(function(){
var src = $("img",this).attr("src");
$("#large").attr("src",src);
});
});
I started with this:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('large').setAttribute('src', bilder[0]);
for (var i = 0, len = bilder.length; i < len; ++i) {
//???
};
});
That's what I have, but appending and mouseover...no idea.
Hope you can help me "converting" this.
Ok, phew, this comes a little close. Can you try this ?
for (var i = 0, len = bilder.length; i < len; ++i) {
var els = document.getElementById("gallery").getElementsByClassName("large");
for (var j = 0; j < els.length; ++j){
els[i].innerHTML += "<div class='small'><table><tr><td><img src='"+bilder[i]+"' /></td></tr></table></div>";
}
};
...
var smallEls = document.getElementsByClassName("small");
for( var i = 0 ; i < smallEls.length; ++i){
var tds = smallEls[i].getElementsByTagName("td");
for( var j = 0 ; i < tds.length; ++j){
tds[j].onmouseover = function(){
var imgs = document.getElementsByTagName("img");
for( var k = 0 ; k < imgs.length; ++k){
var src = imgs[k].src;
document.getElementById("large").addAttribute("src", src);
}
}
}
}
You can use the property innerHtml of an element te set its content. To append some content, you should use +=
Ex: myElement+= "<p>A new paragraph</p>"
FYI, solved it like this:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('large').setAttribute('src', bilder[0]);
for (var i = 0, len = bilder.length; i < len; ++i) {
var els = document.getElementById("gallery").getElementsByClassName("large");
for (var j = 0; j < els.length; ++j){
els[j].innerHTML += "<div class='small'><table><tr><td onmouseover='document.getElementById(\"large\").setAttribute(\"src\", \""+bilder[i]+"\");'><img src='"+bilder[i]+"' /></td></tr></table></div>";
}
};
});