Develop Reference

How to determine the img source using Jquery/Javascript on pageload?

I've gone through many SO threads, I can't seem to find a working solution.
All I'm trying to do is when the page loads, the site pushes all elements with the ".home" class into the array arr. Then, the script parses through each element in the array and tries to match it with a string. For example, right now all I have is a check to see if the element has the words "Boston" in it, in which case I want to make the image source for ".homeimage" the linked imgur link. I'm aware it's not wise to host images on imgur for these reasons, I'm just trying to check if it works. Below this test I have some redundant code I was practicing with that I found in a SO thread, changing the color of text to gray. I figured changing attributes is the same.
my html code:
<td colspan = "3"width=400px class = "home"><b><%= game.home %></b></td>
<td colspan = "3"><img style="width:150px;height:128px;" class = "homeimage"></td>
my javascript/jquery code:
<script>
var arr=[];
$(document).ready( function(){
$(".home").each(function(){ arr.push($(this));});
for(i = 0; i < arr.length; i++){
if(arr[i].indexOf "Boston" != -1){
$('.homeimage img').attr("src","http://i.imgur.com/s5WKBjy.png");
}
}
$.each(arr,function(key,val){
val.css('color','gray')}); //something redundant i was testing out
});
</script>
additional questions:
When I have multiple image with the .homeimage class, and multiple checks to determine the image source, will it make all of the images in the .homeimage class that src at the end? So whatever the last image that gets checked is the image src for all of the images with the ".homeimage" class? I don't want that. How can I uniquely make each image? Make a custom id instead of a class for each div? Also, does this script have to be below the html in question? Or does that not matter
Thanks for the future advice you all.

// I don't quite understand what you want to do.
// Since you type too much, and make no highlights.
// but here are somethings I found:
var arr = []; // this array is going to contain all tags (like td) with class '.home'
if(arr[i].innerHTML.indexOf("Boston") != -1) { } // indexOf() won't work on DOM element
// then arr[0] must be a DOM element, so why you call .indexOf("Boston") on it?
// next, $('.homeimage img') all return DOM element with class 'homeimage' or with tagName 'img'
$('img.homeimage'); // this may what you want to do.
// Alright, I try to give you an answer.
// this oImgUrl works as a map from some ((String))-->((img url))
var oImgUrl = {
'Boston': 'http://another.imageurl.com/boston.png',
'NewYork': 'http://another.imageurl.com/newyork.png'
};
// I take your "arr" unchanged
// this will test every element in arr
// if carry String like 'Boston' or 'NewYork'
// then find the img tag (img.homeimage) in it.
// then apply URL string to img tag
for (var i=0, length=arr.length; i < length; i++) {
if(arr[i].innerHTML.indexOf("Boston") != -1) {
arr[i].find('img.homeimage').attr('src', oImgUrl['Boston']);
continue;
}
if(arr[i].innerHTML.indexOf("New York") != -1) {
arr[i].find('img.homeimage').attr('src', oImgUrl['NewYork']);
continue;
}
}
example html:
<td class='home'>Welcome to Boston!<img class='homeimage'></td>
<td class='home'>Welcome to New York!<img class='homeimage'></td>
answers:
Question 1: Custom ID?
JavaScript will find these two td.home and add them into arr.
then, apply different image url to img tag
according to innerHTML of the td tag.
when doing this, you don't need to set each img tag an unique ID.
Question 2: Script place below html?
No, you don't have to.
You hold all thses script in docuement ready function
so, they will only work when HTML DOM is ready.
in another words, no matter where you place this script,
they will be invoked after Every Tag is ready.

Change Anchor Target based on Text using JavaScript (No jQuery)

I have c# code which generates Anchor tags on fly. I wanted to change some of anchor tag target based on its text.
For example dynamic code generated HTML like below
<a target='_blank' class=txt href="http://www.stackoverflow.com">THE BEST SITE</a>
I wanted to change its target if text equals THE BEST SITE
Note: I have no jQuery files included in asp.net project.
So far I have tried including this script just to get the text, but it is not even displaying the alert
$(document).ready(function() {
$(".txt").click(function() {
alert($(this).text());
});
});

Here is a function that checks if an element's innerText is equal to a specific phrase. If it is, it sets the target attribute specific to that phrase.
function changeTarget(elem, phrase){
if(elem.innerText === phrase){
elem.target = phrase;
}
}
Depending on your DOM, you could just iterate through all your anchor elements and run this function with the desired phrase.
If you have a bunch of these with the .txt class you can just do something like:
var elems = document.querySelectorAll('.txt');
for(var i = 0; i < elems.length; i++){
changeTarget(elems[i], "THE BEST SITE");
}

I think you want something like
var els = document.getElementsByClassName('txt');
for(var i=0; i<els.length; ++i)
if(els[i].textContent == "THE BEST SITE")
els[i].target = 'something';

Finding the value of all H2s on a page with Javascript

I have been trying to find a solution on Google so I thought I would post it to the community. I need to use JavaScript to locate all the H2s on a page, get the innerHTML values and then loop them horizontally in a div (easy enough) to show a subheading anchor list at the top of the page. Can someone tell me or give me a hint on how I can use a JavaScript routine to locate all the H2s on a page? Thanks!

If you're using jQuery, you could run something like this
$('h2').each({
/* function */
});
Then to append to the .nav container you can run
$('h2').each(function() {
$('.nav').append($(this).text())
});

Use document.getElementsByTagName to select all the h2s:
var h2s = document.getElementsByTagName('h2');
for(var i = 0, length = h2s.length; i < length; i++){
// Do something with
h2s[i].innerHTML;
}

First of all, create an empty collection for the links you're going to create:
var $links = $();
Then, loop through each h2 using .each(), providing index and h2 as arguments — the first keep count, the second to get a reference of the current <h2> we're dealing with.
$('h2').each(function(index, h2){
// If there is no id (to link to), create one based on the index
if(!h2.id){
h2.id = 'header' + index;
}
// Get a jQuery object of the header
var $h2 = $(h2);
// Link will be an <a> with the same text as the heading, and will link to its id
var $link = $('<a>').text($h2.text()).attr('src', '#' + h2.id);
// Add this link to the collection
$links = $links.add($link);
});
So now $links contains your table of contents. Assuming you want to chuck these links in after the <h1>, you'd do the following:
$links.insertAfter('h1');
…but of course you can do whatever you want with them at this point.

Getting a text inside a TAG via xpath and javascript in a html document

So, I'm trying to get the text inside of a tag in a list.
Let me say I have something like
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
so, I want to get the "number" of the DIV who matchs "text4" for example, so it will return a "4".
I cant modify the html, there is no class or ID in the divs.
Maybe I can get the innerHTML of a div? But how will I put all the divs inside a vector or something like that?
Thanks in advance

Here is a way of working with elements by tag name:
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var html = divs[i].innerHTML;
console.log(html);
}
DEMO: http://jsfiddle.net/DEJty/

In XPath this is
count(//div[.='text4']/preceding-sibling::*) + 1
Incidentally, 'text4' is not "in" any tag; it is between two tags, a start tag and an end tag. I mention this because you will find it easier to understand specifications and error messages if you learn the official vocabulary.

jquery confusing code

I am learning Jquery and Javascript from web examples. I have a good working knowledge but some code still trips me up. The following code is used for a shopping cart to hide the check out button and replace with a div displaying a message about minimum cart requirements. There is a part of the code throwing me off though.
function getCollectionCount() {
var totalCollectionCount = 0;
var collection = $('td[alt*="Collection"]');
for (var i = 0; i < collection.length; i++) {
var curVal = $(collection[i]).find("select").val();
if (curVal != undefined){
totalCollectionCount += parseInt(curVal);
}
}
What does this part mean?
var collection = $('td[alt*="Collection"]');

td[alt*="Collection"] selects all <td> elements whose alt attribute contains Collection, such as:
<td alt="Collection"></td>
<td alt="CollectionFoo"></td>
<td alt="BarCollection12324343"></td>
but not
<td></td>
<td alt=""></td>
<td alt="Foo"></td>
Side note: this is a pretty basic question that could easily be answered by read the jQuery selectors API documentation:
element selector
attribute-contains selector
Please do try to research before you ask!

This is a jQuery attribute selector clause. It's selecting any td element which has an atrtibute named alt whose string contains the value Collection.
Contains Selector: http://api.jquery.com/attribute-contains-selector/
jQuery has a number of useful attribute selectors. Here is the main reference page for them. Very much worth the read if you're just getting started with jQuery
http://api.jquery.com/category/selectors/attribute-selectors/

That code returns every td element whose "alt" attribute contains "Collection".
http://api.jquery.com/attribute-contains-selector/
jQuery is full of these funky shortcuts that take forever to learn, so I always keep a copy of jQuery in action on my desk at all times :)

This code can be rewritten more simply and briefly like this:
function getCollectionCount() {
var totalCollectionCount = 0;
$('td[alt*="Collection"] select').each(function() {
var val = this.value || "0";
totalCollectionCount += parseInt(val, 10);
});
return(totalCollectionCount);
}
And, this is how it works:
Initialize totalCollectionCount to 0
Find all td elements that have the string "Collection" in the alt attribute and then find select elements within that td
Iterate over all elements found that match the above condition
Initialize a local variable with either the value of the select object or "0" if there is no value or it's empty
Turn that value into a number (must pass the radix to parseInt so it won't guess) and add it to the sub-total so far.
return the total we found.