Mock Mark up:
<div class="post">
<a name="1234"></a>
</div>
Remember this is mock markup of course there is more html in the above, this a is the first a tag inside the parent .post
Here is my code:
var pid = [];
var post = document.getElementsByClassName('post');
for(var i=0;i<post.length;i++){
var postId = post[i].getElementsByTagName('a')[0].getAttributeNode('name');
pid.push(postId);
}
alert(pid);
I keep getting literally ,,,,,,
I have tried .getAttribute and .getAttributeNode
Is there something I am doing wrong here? I am trying to make an array of "names" persay to classify these later on using an ID specification.
Any suggestions thank you!
You did everything right but you forgot the .value:
var pid = [];
var post = document.getElementsByClassName('post');
for(var i=0;i<post.length;i++){
var postId = post[i].getElementsByTagName('a')[0].getAttributeNode('name').value;
pid.push(postId);
}
alert(pid);
FIDDLE
You can use .value as Tom mentioned or you can use .getAttribute('name').
You would need to modify your code a little bit further for it work for more than one anchor in .post class:
<div class="post">
<a name="1234"></a>
<a name="5678"></a>
<a name="9123"></a>
</div>
JavaScript:
var pid = [];
var post = document.getElementsByClassName('post');
for(var i=0;i<post.length;i++){
var anchors = post[i].getElementsByTagName('a');
for(var j=0; j<anchors.length; j++){
var name = anchors[j].getAttribute('name');
pid.push(name);
}
}
for(var i=0;i<pid.length;i++){
alert(pid[i]);
}
http://jsfiddle.net/joybroto/3d9qz/7/
Related
I have a form that has multiple fields all with the same class. These are populated with URL's that follow the same structure. I am trying to extract the same section from each URL. So far var res = x.split('/')[5]; will achieve this but only for the first URL. I can also use var x = document.querySelectorAll(".example") to change all the url's but I cannot find the correct way to combine both of these function. so far my code looks like this:
script>
function myFunction() {
var x = document.querySelectorAll(".example").innerHTML;
var res = x.split('/')[5];
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML = res;
}
}
</script>
I have looked around but can't find a solution that fits. Thanks in advance for your help.
So loop over the HTML Collection, this is making assumptions based on code.
// Find all the elements
var elems = document.querySelectorAll(".example")
// loop over the collection
elems.forEach(function (elem) {
// reference the text of the element and split it
var txt = elem.innerHTML.split("/")[5]
// replace the text
elem.innerHTML = txt
})
<div class="example">1/2/3/4/5/a</div>
<div class="example">1/2/3/4/5/b</div>
<div class="example">1/2/3/4/5/c</div>
<div class="example">1/2/3/4/5/d</div>
<div class="example">1/2/3/4/5/e</div>
<div class="example">1/2/3/4/5/f</div>
I am working on a website where I dont have any control on the code (functionality side. however even if I had the access I wouldn't be able to make any changes as I am a front end designer not a coder..lol). The only changes I can make is CSS, js.
What I am tring to do:
I got the url on the page like this:
www.test.com/#box1#box3#box5
(I am not sure if I can have more than one ID in a row. please advice. However thats how the developer has done it and I dont mind as there are no issues yet)
the page html
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
I would like to take different ids from the URl and use it to hidhlight the divs with that ID (by addding a class name "highlight")
The result should be like this:
<div id="box1 highlight"></div>
<div id="box2"></div>
<div id="box3 highlight"></div>
<div id="box4"></div>
<div id="box5 highlight"></div>
I would like to learn the smart way of taking just the id numbers from the url and use it to select the div with that paticulat no.
just a quick explanation:
var GetID = (get the id from the URL)
$('#box' + GetID).addClass('highlight');
Try This...
var hashes =location.hash.split('#');
hashes.reverse().pop();
$.each(hashes , function (i, id) {
$('#'+id).addClass('highlight');
});
Working fiddle here
var ids = window.location.hash.split('#').join(',#').slice(1);
jQuery(ids).addClass('highlight');
or in plain JS:
var divs = document.querySelectorAll(ids);
[].forEach.call(divs, function(div) {
div.className = 'highlight';
});
There are various way to resolve this issue in JavaScript. Best is to use "split()" method and get an array of hash(es).
var substr = ['box1','box2']
// Plain JavaScript
for (var i = 0; i < substr.length; ++i) {
document.getElementById(substr[i]).className = "highlight"
}
//For Each
substr.forEach(function(item) {
$('#' + item).addClass('highlight')
});
//Generic loop:
for (var i = 0; i < substr.length; ++i) {
$('#' + substr[i]).addClass('highlight')
}
Fiddle - http://jsfiddle.net/ylokesh/vjk7wvxq/
Updated Fiddle with provided markup and added plain javascript solution as well -
http://jsfiddle.net/ylokesh/vjk7wvxq/1/
var x = location.hash;
var hashes = x.split('#');
for(var i=0; i< hashes.length; i++){
var GetID = hashes[i];
//with jQuery
$('#box' + GetID).addClass('highlight');
//with Javascript
document.getElementById('box' + GetID).className = document.getElementById('box' + GetID).className + ' highlight';
}
I got an HTML string as :var code; I want to extract all hyper link title values in this big string and place them in textarea. I tried the following but it never works. could any one tell me what i am doing wrong?
sample hyperlinks to look for(i want to extract mango,cherry,...) :
mango
cherry
my code string has blocks of data like below:
<div class="details">
<div class="title">
mango
<span class="type">3</span>
</div>
</div>
full code:
$.getJSON('http://anyorigin.com/get?url=http://asite.com/getit.php/&callback=?', function(data){
//$('#output').html(data.contents);
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
var start = siteContents.indexOf('<ul class="list">');
var end = siteContents.indexOf('<ul class="pag">', start);
var code = siteContents.substring(start, end);
document.myform2.outputtext2.value = code ;
var pattern = /<a href="([^"]+?)">([^<]+?)<\/a>/gi;
code = code.match(pattern);
for (i = 0; i < code.length; i++) {
document.write($2<br />'));
}
});
</script>
It looks like you're trying to parse HTML with regex. This post has some more info on that topic.
Since this question is tagged as jQuery, you could try something like the following...
Make a jQuery object out of the returned HTML:
$markup = $(data.contents);
Find the anchors:
$anchors = $markup.find('a');
Get the text (or whatever attribute you want from it):
arrText = [];
$anchors.each(function() {
arrText.push($(this).text());
});
Put result into textarea:
$textarea.val(arrText.join(','));
To achive this jquery is the simplest solution, you can try below code
$('a').each(function(){
var copiedTitle = $(this).html();
var previous = $('#test').html();
var newText = previous +"\n"+ copiedTitle;
$('#test').html(newText);
});
JS Fiddle
can anyone give me the javascipt code to extract following instances of sf_number from my HTML?
<ul class="multi_value_field" style="width: 99.5%;">
<li class="choice" choice_id="sf_number">sf_number<a class="close">×</a><input type="hidden" name="ticket[set_tags][]" value="sf_number" style="display: none;"></li>
<li class="search_field_item"><input type="text" autocomplete="off" tabindex="20"></li>
</ul>
Basically I want to replace all three instances of sf_number with a different
value from another field. This is the code I have made to try and extract sf_number but doesn't work so far:
var n2 = document.getElementsByClassName("multi_value_field").getElementsByClassName("choice");
Thanks in advance
UPDATE
How can I change my existing code by using your suggestions below?
<html>
<script type="text/javascript">
copy = function()
{
var n1 = document.getElementById("ticket_fields_20323656");
var n2 = document.getElementById("choice").getElementsByClassName("sf_number")[0] ;
n2.value = n1.value;
}
</script>
<input type="button" value="copy" onClick="copy();" />
</html>
Update
This doesn't seem to work, is it correct?
<html>
<script type="text/javascript">
copy = function()
{
var fields = document.getElementsByClassName("multi_value_field")[0].getElementsByClassName("choice");
for (var i = 0; i < fields.length; i++)
fields[i].setAttribute("choice_id", "document.getElementById("ticket_fields_20323656").value");
fields[i].getElementsByTagName("input")[0].value = "document.getElementById("ticket_fields_20323656").value";
fields[i].firstChild.nodeValue = "document.getElementById("ticket_fields_20323656").value";
}
</script>
<input type="button" value="copy" onClick="copy();" />
</html>
Try this code. Do you also want to replace the text?
<script>
var fields = document.getElementsByClassName("multi_value_field")[0].getElementsByClassName("choice");
for (var i = 0; i < fields.length; i++)
{
fields[i].setAttribute("choice_id", "something else");
fields[i].getElementsByTagName("input")[0].value = "something else";
fields[i].firstChild.nodeValue = "something else";
}
</script>
var n2 = document.getElementsByClassName("multi_value_field") returns a node List
So you need to use a for loop to iterate the list..
var n2 = document.getElementsByClassName("multi_value_field");
for(var i =0;i< n2.length;i++){
var $li = n2[i].getElementsByClassName("choice"); This is again a Node list.
for(var j = 0;j< $li.length ; j++){
$li[j] // This the li in question
}
}
UPDATE
var n1 = document.getElementById("ticket_fields_20323656");
var n2 = document.getElementById("choice").getElementsByClassName("sf_number");
// The above line again return's node List ....
n2.value = n1.value;
Replace that by this line with this if you feel it has a single class
var n2 = document.getElementById("choice").getElementsByClassName("sf_number")[0] ;
But the thing is I don't see the element with id="choice" in the HTML.
I'm not sure I understand your question.
There is no HTML attribute named "choice_id", and using non–standard attributes is not a good idea. If you want to identify a number of elements using the value 'sf_number', you should use a class instead, e.g.
<li class="choice sf_number">sf_number<a class="close">×</a>...</li>
Now you can get all elements with class of "sf_number" using getElementsByClassName, or querySelectorAll. You can add a shim for one or both of those to make life easier, then use:
var sfNumbers = document.querySelectorAll('.sf_number');
Then you can iterate over the collection per other answers.
An element can have multiple classes, the above will select only those with a class of 'sf_number'. If you want to select the text sf_number, you are much better off putting it in a span or similar element so you can reference it more directly. Relying on different browsers to insert text nodes consistently is not a good idea.
I'm trying to create a simple javascript game for college and am having trouble getting what i want to display on screen.
my script is as follows:
var qArray = new Array();
qArray[0] = {image:"Images/q1.png"};
qArray[1] = {image:"Images/q2.png"};
qArray[2] = {image:"Images/q3.png"};
qArray[3] = {image:"Images/q4.png"};
qArray[4] = {image:"Images/q5.png"};
var count = 0;
var question = qArray.splice(count,1);
when i use this i get "undefined":
document.getElementById("question").innerHTML = question.image;
and when i use this i get nothing:
document.getElementById("question").src = question.image;
my html is just a simple div like so:
<div id = "question" align = "center">
</div>
i need to have the "count" variable because it increments to show the next image for the next question
if anyone could help that would be great
Here is a working Fiddle. qArray.splice() doesn't work because it actually removes that element from the array and returns a new array while you were just looking for a specific index in the array (not to mention you just deleted the element you were looking for)
This works. I used a random imgur image to show that it does indeed load.
<html><head></head><body>
<img src="" id="question"></img>
<script type="text/javascript">
var qArray = new Array();
qArray[0] = {image:"http://i.imgur.com/pGpmq.jpg"};
qArray[1] = {image:"Images/q2.png"};
qArray[2] = {image:"Images/q3.png"};
qArray[3] = {image:"Images/q4.png"};
qArray[4] = {image:"Images/q5.png"};
var count = 0;
var question = qArray[count];
document.getElementById('question').src = question.image;
</script>
</body>
</html>