I am trying to get first letter of firstname and lastname from a div and paste it in another div but it is pasting the same value in all divs and not taking unique value from each div.
Working Fiddle: https://jsfiddle.net/bv7w8dxg/1/
Issue Fiddle: https://jsfiddle.net/bv7w8dxg/
var takword = $('.nameholder').text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder').text(text);
Markup
`
John Doe
<div class="main-holder">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>`
You are using class selectors, which selects all elements with the given class name. That's why you have all the elements set with same value
You need to wrap your elements then process each row independently
I updated your code snippet to demonstrate this:
$('.row').each(function() {
var takword = $('.nameholder', this).text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder', this).text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="nameholder">John Doe</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>
Related
I am creating calculator with Javascript and i have a problem with eval() function
HTML
`
<div class="calCul1">
<div id="firstCol">
<div id="wind"></div>
</div>
<div id="secondCol">
<div class="buttonsCol1">
<div id="underCol1">
<div id="bracketOpen"><button id="bracketOBut" onclick=" ">!</button></div>
<div id="seven"><button id="sevenBut" onclick="add(7)">7</button></div>
<div id="four"><button id="fourBut" onclick="add(4)">4</button></div>
<div id="one"><button id="oneBut" onclick="add(1)">1</button></div>
<div id="zero"><button id="zeroBut" onclick="add(0)">0</button></div>
</div>
<div id="underCol2">
<div id="bracketClose"><button id="root" onclick=" "add>√</button></div>
<div id="eight"><button id="eightBut" onclick="add(8)">8</button></div>
<div id="five"><button id="fiveBut" onclick="add(5)">5</button></div>
<div id="two"><button id="twoBut" onclick="add(2)">2</button></div>
<div id="dote"><button id="doteBut" onclick="addDote('.')">.</button></div>
</div>
</div>
<div class="buttonsCol2">
<div id="underCol3">
<div id="procent"><button id="procentBut" onclick="procent('%')">%</button></div>
<div id="nine"><button id="nineBut" onclick="add(9)">9</button></div>
<div id="six"><button id="sixBut" onclick="add(6)">6</button></div>
<div id="three"><button id="threeBut" onclick="add(3)">3</button></div>
<div id="equals"><button id="equalsBut" onclick="equal('=')">=</button></div>
</div>
<div id="underCol4">
<div id="delete"><button id="deleteBut" onclick="document.getElementById('wind').innerHTML=''">AC</button></div>
<div id="divide"><button id="divideBut" onclick="add('/')">÷</button></div>
<div id="multiply"><button id="multiplyBut" onclick="add('*')">x</button></div>
<div id="minuse"><button id="minuseBut" onclick="add('-')">-</button></div>
<div id="plus"><button id="plusBut" onclick="add('+')">+</button></div>
</div>
</div>
</div>
</div>
`
there is no reaction when i click on "+"
Javascript
let x = document.getElementById("wind");
function add(a) {
// document.getElementById("wind").value =
x.innerHTML += a;
}
function equal() {
// x.style.cssText = `d`
x = eval(x);
// console.log(x);
}
i tried to solve it with .value, but then I couldnt even print the numbers
You probably want to run the eval() function on the text of the wind element - i.e x.innerText - instead of on the element itself - which is what eval(x) is doing.
Also, using eval() to perform arithmetic is a really bad idea.
The issue is here: x = eval(x);. You are just getting all of the object. In your code, the x variable means that the Document method getElementById(). It returns an element object. You should get the element's value, not all of its. Because of that, we use the element property innerHTML. the innerHTML property gets or sets the HTML or XML within the element.
Hope it helps! In addition: Never use eval()!
let x = document.getElementById("wind");
function add(a) {
// document.getElementById("wind").value =
x.innerHTML += a;
}
function equal() {
// x.style.cssText = `d`
x.innerHTML = eval(x.innerHTML);
// console.log(x);
}
<div class="calCul1">
<div id="firstCol">
<div id="wind"></div>
</div>
<div id="secondCol">
<div class="buttonsCol1">
<div id="underCol1">
<div id="bracketOpen"><button id="bracketOBut" onclick=" ">!</button></div>
<div id="seven"><button id="sevenBut" onclick="add(7)">7</button></div>
<div id="four"><button id="fourBut" onclick="add(4)">4</button></div>
<div id="one"><button id="oneBut" onclick="add(1)">1</button></div>
<div id="zero"><button id="zeroBut" onclick="add(0)">0</button></div>
</div>
<div id="underCol2">
<div id="bracketClose"><button id="root" onclick=" "add>√</button></div>
<div id="eight"><button id="eightBut" onclick="add(8)">8</button></div>
<div id="five"><button id="fiveBut" onclick="add(5)">5</button></div>
<div id="two"><button id="twoBut" onclick="add(2)">2</button></div>
<div id="dote"><button id="doteBut" onclick="addDote('.')">.</button></div>
</div>
</div>
<div class="buttonsCol2">
<div id="underCol3">
<div id="procent"><button id="procentBut" onclick="procent('%')">%</button></div>
<div id="nine"><button id="nineBut" onclick="add(9)">9</button></div>
<div id="six"><button id="sixBut" onclick="add(6)">6</button></div>
<div id="three"><button id="threeBut" onclick="add(3)">3</button></div>
<div id="equals"><button id="equalsBut" onclick="equal('=')">=</button></div>
</div>
<div id="underCol4">
<div id="delete"><button id="deleteBut" onclick="document.getElementById('wind').innerHTML=''">AC</button></div>
<div id="divide"><button id="divideBut" onclick="add('/')">÷</button></div>
<div id="multiply"><button id="multiplyBut" onclick="add('*')">x</button></div>
<div id="minuse"><button id="minuseBut" onclick="add('-')">-</button></div>
<div id="plus"><button id="plusBut" onclick="add('+')">+</button></div>
</div>
</div>
</div>
</div>
if data value is matching with any div inside requestsampler class then dynamically add new class(sampleClass) to test class inside the matching container
js:
var data = **somevalue**;
data is dynamic value
html:
<div class="requestsampler">
<div class= "**somevalue**">
<div class="test"> // add new class <div class="test sample class">
//
</div>
</div>
<div class= "somevalue2">
<div class="test">
//
</div>
</div>
<div class= "somevalue3">
<div class="test">
//
</div>
</div>
</div>
tried not working:
$('.requestsampler').hasClass(data) {
$(.'requestsampler .`${data}` .test').addClass('sampleclass');
}
You could simply use Attribute Contains Prefix Selector [name|="value"] for more info please refer http://jqapi.com/#p=attribute-contains-prefix-selector.. below is the code for your example.
$(document).ready(()=>{
var data = "somevalue"; $('div[class|="'+data+'"]>.test').addClass("sampleclass");
})
.sampleclass{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="requestsampler">
<div class= "somevalue">
<div class="test"> // add new class <div class="test sample class">
//
</div>
</div>
<div class= "somevalue2">
<div class="test">
//
</div>
</div>
<div class= "somevalue3">
<div class="test">
//
</div>
</div>
</div>
you could try jquery elem.find() api. And also use className with string and numeric combination instead of symbols
i have changed the condition with element find length. Because hasClass() only perform on the selector element. So if you are using find() they will find the matched element.
And also your if condition does not make any sense, without condition is also working same
Updated
If you need first test element. use .eq(0) or else use different className for the first test element
var data = "somevalue";
if ($('.requestsampler').find(`.${data}`).length > 0) {
$('.requestsampler').find(`.${data}`).find('.test').eq(0).addClass('sampleclass');
}
.sampleclass {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="requestsampler">
<div class="somevalue">
<div class="test"> // add new class
<div class="test sample class">
sample
</div>
</div>
<div class="somevalue2">
<div class="test">
//
</div>
</div>
<div class="somevalue3">
<div class="test">
//
</div>
</div>
</div>
Here's my code:
<div id='layer1'>
<div id='a'>
<div id='b'>
<div id='layer2'>
<div id='a'>
<div id='b'>
<div id='layer3'>
<div id='a'>
<div id='b'>
I want to try to get the element [a] of layer1.
Could I do this using pure javascript and withOUT jquery and other stuff?
An ID uniquely identifies one single element on the page. The behavior you described is more like "a class" inside of an ID:
document.querySelector("#counter-for-drinks .up-arrow")
and so if you want a different up-arrow, it is:
document.querySelector("#counter-for-burgers .up-arrow")
document.querySelector() is what is similar to jQuery $(" "). It also has the form document.querySelectorAll() for getting all matched elements.
Your HTML is missing closing tags. You can always validate your code here.
Also, you should use class instead of id.
<div id='layer1'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer2'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer3'>
<div class='a'></div>
<div class='b'></div>
</div>
You can use javascript to get elements:
document.querySelector("#layer1 .a")
var firstA = document.querySelectorAll('#layer1 #a');
var nodeString = '';
if (firstA.length > 0) {
for (var i = 0; i < firstA.length; i++) {
nodeString = nodeString + firstA[i].innerText + '<br/>';
}
}
document.getElementById('founded-nodes').innerHTML = nodeString;
#founded-nodes {
color: brown;
}
<div id='layer1'>
<div id='a'>layer1 aaa</div>
<div id='b'>layer1 bbb</div>
</div>
<div id='layer2'>
<div id='a'>layer2 aaa</div>
<div id='b'>layer2 bbb</div>
</div>
<div id='layer3'>
<div id='a'>layer3 aaa</div>
<div id='b'>layer3 bbb</div>
</div>
<div id="founded-nodes"></div>
As all said in above over comments and answers, one must use a single id on the same page, or else the use of classes is a must. But if you want to achieve this, you can have a look at code.
Example:
I have a variable amount of rows, each with 3 divs with classes like so:
<div class="row>
<div class='date'>1/2/2018</div>
<div class='event'>concert</div>
<div class='act'>Pink Floyd</div>
</div>
<div class="row>
<div class='date'>12/5/2017</div>
<div class='event'>dj set</div>
<div class='act'>Moby</div>
</div>
<div class="row>
<div class='date'>5/5/2018</div>
<div class='event'>movie</div>
<div class='act'>Ant-Man</div>
</div>
How can I use jQuery to gather them into an associative array that I'll be passing to php to INSERT into a database table?
You can use map to loop thru the .row div. Use reduce to group the inner divs into a js object.
var result = $('.row').map(function() {
return $(this).find('div').toArray().reduce(function(c, v) {
c[$(v).attr('class')] = $(v).text();
return c;
}, {});
}).get();
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class='date'>1/2/2018</div>
<div class='event'>concert</div>
<div class='act'>Pink Floyd</div>
</div>
<div class="row">
<div class='date'>12/5/2017</div>
<div class='event'>dj set</div>
<div class='act'>Moby</div>
</div>
<div class="row">
<div class='date'>5/5/2018</div>
<div class='event'>movie</div>
<div class='act'>Ant-Man</div>
</div>
To select each all the div with the class row use this
var rows=$('div.row');
To loop through it use this
var array=[];
for(var i=0;i <rows.length;i++){
$.each(rows,function(){
var children=this.children('div');
$.each(children,function(){
var index=this.attr('class');
var value=this.text();
array[i][index]=value;
});
});
}
console.log(array);
This is the HTML code:
<div id="CurrencyQuotePane">
<div class="CurrencyQuote">
<div class="column">
<div class="form-label">Pair: </div><div>1/2</div>
<div class="form-label padding-top">Spread: </div><div>385</div>
</div>
<div class="column">
<div class="form-label">Rate: </div><div>1/2</div>
<div class="form-label padding-top">High/Low: </div><div>2002.0/0.0055</div>
</div>
</div>
<div class="clear"></div>
</div>
How do I get the 385 in Javascript if it keeps changing?
This is my current javascript:
function getSpread(){
var tag = iframe.contentDocument.getElementByClassName('SPREAD');
var spread = Number(tag[1].innerHTML);
return spread;
}
Sorry if I don't know anything about javascript, I am a complete newbie.
Change it to this:
<div class="column">
<div class="form-label">Pair: </div><div>TEXT</div>
<div class="form-label padding-top">SPREAD</div><div id="spreadval">385</div>
</div>
function getSpread(){
var tag = iframe.contentDocument.getElementById('spreadval');
return parseInt(tag.innerHTML);
}
var column = document.getElementsByClassName('column');
var divs = column[0].getElementsByTagName('div');
alert(divs[1].innerHTML);
set id to your div
<div class="column">
<div class="form-label">Pair: </div><div>TEXT</div>
<div class="form-label padding-top">SPREAD</div><div id="changing_number">385</div>
</div>
get with jquery
$(function(){
var theNumber = parseInt($('#changing_number').text());
});
or with DOM:
$(function(){
var theNumber = parseInt(document.getElementById('changing_number').innerHTML);
});
here you can learn js: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp