Develop Reference

Replace All URLs within DIV

I would like to amend all URLs within a specified DIV but unsure how to. An example I want is:
<div id="SearchList">
up
down
left
right
</div>
So for example I would like to amend the URLs to be displayed as follows:
<div id="SearchList">
up
down
left
right
</div>
Any ideas how this can be achieved?

// For each anchor element...
$("#SearchList a").each(function() {
// Change its 'href' attribute to...
$(this).attr("href",
// Its current 'href' attribute with a .replace() called
$(this).attr("href").replace("google", "bing"));
});

This is what I would do
$('#SearchList a').each(function(){
var $el = $(this),
hash = $el.attr('href'),
replace = 'www.bing.com',
regex = /www.+.com\//,
replacement = hash.replace(regex, replace);
$el.attr('href', replacement);
});

Shorter would be
$('a').prop('href', function(i,e){ return e.replace('google', 'bing')});

js How to add href + text onclick

I need to pass (using javascript) text inside span to href
<div class='tableCell'><span>information</span></div>
<div class='tableCell'><span>contact</span></div>
<div class='tableCell'><span>about</span></div>
for example when i click to about link must be example.com/tag/about/

Here is my Answer. I'm using Javascript to manipulate the DOM to add a new element with the href equal to the inner text within the span element.
I hope you find this answer helpful.
Thanks.
var spans = document.getElementsByTagName('span')
var baseUrl = 'http://example.com/tag/'
for(var i=0; i<spans.length; i++)
{
var curElement = spans[i];
var parent = curElement.parentElement;
var newAElement = document.createElement('a');
var path = baseUrl+curElement.innerHTML;
newAElement.setAttribute('href', path);
newAElement.appendChild(curElement);
parent.appendChild(newAElement)
}
DEMO

The simplest way:
$( "span" ).click(function() {
var link = 'http://yousite.com/tag/'+ $(this).text().replace(/ /, "-")+"/";
window.location.href= link.toLowerCase();
});
DEMO
http://codepen.io/tuga/pen/yNyYPM

$(".tableCell span").click(function() {
var link = $(this).text(), // will provide "about"
href = "http://example.com/tag/"+link; // append to source url
window.location.href=href; // navigate to the page
});
You can try the above code

You do not have links but span in your html. However, you can get build the href you want and assign it to an existing link:
$('div.tableCell').click(function(){
var href = 'example.com/tag/' + $(this).find('span').text();
})

Lets work with pure javascript, I know you want to use jQuery but I am really sure too many people can't do this without looking in to web with pure javascript. So here is a good way.
You can follow it from jsFiddle
var objectList = document.getElementsByClassName("tableCell");
for(var x = 0; x < objectList.length; x++){
objectList[x].addEventListener('click', function(){
top.location.href = "example.com/tag/" + this.childNodes[0].innerHTML;
});
}
Lets work on the code,
var objectList = document.getElementsByClassName("tableCell");
now we have all element with the class tableCell. This is better than $(".tableCell") in too many cases.
Now objectList[x].addEventListener('click', function(){}); using this method we added events to each object.
top.location.href = "example.com/tag/" + this.childNodes[0].innerHTML; with this line if somebody clicks to our element with class: We will change the link to his first child node's text.
I hope it is useful, try to work with pure js if you want to improve your self.

Your Method
If you always are going to have the url start with something you can do something like this. The way it is set up is...
prefix + THE SPANS TEXT + suffix
spaces in THE SPANS TEXT will be converted to -
var prefix = 'http://example.com/tag/',
suffix = '/';
$('span').click(function () {
window.location.href = prefix + $(this).text().replace(' ', '-').trim().toLowerCase() + suffix;
//An example is: "http://example.com/tag/about-us/"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tableCell'><span>Information</span></div>
<div class='tableCell'><span>Contact</span></div>
<div class='tableCell'><span>About</span></div>
You can adjust this easily so if you want it to end in .html instead of /, you can change the suffix. This method will also allow you to make the spans have capitalized words and spaces.
JSBIN

How to make querySelectorAll select only from child elements of the current element

What I'm asking is how to implement the equivalent functionality of jQuery's children() with HTML5's querySelector/querySelectorAll, i.e. how do I designate the current element in the selector pattern.
For example:
<div id="foo">
<div class="bar" id="div1">
<div class="bar" id="div1.1">
</div>
</div>
<div class="bar" id="div2"></div>
</div>
With document.getElementById('foo').querySelectAll('div.bar') all three divs will be selected. What if I only wanna get div1 and div2, not div1's child div1.1? How do I write [[current node]] > div.bar like css selector?
Could anybody shed some light on this?

In your example you have did id="foo", so above example works.
But in a situation when parent element has no ID, but you still want to use querySelectorAll to get immediate children - it is also possible to use :scope to reference element like this:
var div1 = document.getElementById('div1'); //get child
var pdiv = div1.parentNode; //get parent wrapper
var list = pdiv.querySelectorAll(':scope > div.bar');
Here query will be "rooted" to pdiv element..

Actually there is a pseudo-class :scope to select the current element, however, it is not designated as being supported by any version of MS Internet Explorer.
document.getElementById('foo').querySelectAll(':scope>div.bar')

There's no selector for designating the element from which the .querySelectorAll was called (though I think something may have been proposed).
So you can't do anything like this:
var result = document.getElementById('foo').querySelectorAll('[[context]] > p.bar');
What you'd need would be to select from the document, and include the #foo ID in the selector.
var result = document.querySelectorAll("#foo > p.bar");
But if you must start with an element, one possibility would be to take its ID (assuming it has one) and concatenate it into the selector.
var result = document.querySelectorAll("#" + elem.id + " > p.bar");
If it's possible that the element doesn't have an ID, then you could temporarily give it one.
var origId = elem.id
if (!origId) {
do {
var id = "_" + Math.random().toString(16)
} while (document.getElementById(id));
elem.id = id;
}
var result = document.querySelectorAll("#" + elem.id + " > p.bar");
elem.id = origId;

You can just use like this:
document.querySelectorAll('#foo > p.bar')

can't get the id using .each

I am working on the tabs page... I am trying to get the id's of li from the loop and then hide it. the id's is not found.
<ul>
<li id="Page1" class="tab">Page2</li>
<li id="Page2" class="tab">Page2</li>
</ul>
jquery code:
$(".tab").click(function() {
var thisclick = $(this).attr("id");
var links = $(this).parent();
$(links).each(function() {
$("#PG_" + $(this).attr("id") ).hide();
});
$("#PG_" + thisclick).show();
});

If I understand your problem correctly you have some corresponding elements on the page that should be shown only if underlying link has been clicked. If that's the case then this would work:
$(".tab").click(function() {
var thisclick = $(this).attr("id");
var links = $(this).parent().children();
$(links).each(function() {
$("#PG_" + $(this).attr("id")).hide();
});
$("#PG_" + thisclick).show();
});
http://jsfiddle.net/gdc88/4/

because the links variable is a pointer to the ul element:
var links = $(this).parent();
change to this one may help you:
$(".tab").click(function() {
var thisclick = $(this).attr("id");
var links = $(this).parent();
$(links).find("li").each(function() {
$("PG_" + $(this).attr("id") ).hide();
});
$("PG_" + thisclick).show();
});
Also, you can use
$(links).children("li").each( //etc
OR
$("li", links).each( //etc

At first glance, you want jQuery to query for a Nodename called PG_Page1 for instance, which most likely, will have no result. Unless you got tags like
<PG_Page1></PG_Page2>
somewhere on your page. So my guess is, you either forgot the prefix the string with a . for a classname, or a # for an id.
And by the way, you can just access this.id instead creating a jQuery wrapper object and finally call attr() on it.

Do you miss # in the selector?
$("#PG_" + $(this).attr("id") ).hide();

With a small class addition to your HTML, you can simplify your jQuery. Like so
<ul>
<li id="Page1" class="tab">Page1</li>
<li id="Page2" class="tab">Page2</li>
</ul>
<div id='PG_Page1' class="page"> content from page 1 here </div>
<div id='PG_Page2' class="page"> content from page 2 here </div>
jQuery
$(".tab").click(function() {
var thisclick = $(this).attr("id");
$('div.page').each(function(){
$(this).hide();
$("#PG_" + thisclick).show();
});
});
Example: http://jsfiddle.net/jasongennaro/fZNUH/

How to get the first inner element?

So I want to get the first <a> tag in this <div>. This is really driving me nuts. Thanks for any help.
HTML
<div id="PGD" class="album" onmouseover="load(this)">
<a class="dl" href="#">DOWNLOAD</a>
</div>
Javascript
function load(dl)
{
var ID = $(dl).attr('id');
var elemnt = $('ID:first').attr('id');
}

Non-jQuery: (was not tagged with jQuery before, so I included this)
If you want to get the first child element only:
var element = document.getElementById('PGD').children[0];
If you want to get the first anchor element:
var element = document.getElementById('PGD').getElementsByTagName('a')[0];
With jQuery:
var element = $('#PGD').find('a:first');
// or, to avoid jQuery's pseudo selecors:
// var element = $('#PGD').find('a').first();
and actually your function can just be
function load(dl)
{
var element = $(dl).find('a:first');
}
Update:
As you are using jQuery, I suggest to not attach the click handler in your HTML markup. Do it the jQuery way:
$(function() {
$("#PGD").mouseover(function() {
$(this).find('a:first').attr('display','inline');
alert($(this).find('a:first').attr('display'));
});
});
and your HTML:
<div id="PGD" class="album">
<a class="dl" href="#">DOWNLOAD</a>
</div>
​See for yourself: http://jsfiddle.net/GWgjB/

$("#PGD").children("a:first")
This will give you the first child "a" tag, but not the descendents. E.g.
<div id="log">
<p>Foo</p>
Hello
Hello
</div>
Will give you : Hello

$(ID).find(':first')
See find jQuery command.
$('#PGD').find('a:first')
Actualy I've not understanding problem, so I'm trying correct your function, to make it clear for you:
function load(dl)
{
// var ID = $(dl).attr('id');
// var elemnt = $('ID:first').attr('id'); // Here is error-mast be like $(ID+':first')
var ID = $(dl).attr('id');
var elemnt = $(ID).find('*:first').attr('id');
}
I supose dl that is $('#PGD'). But child element A have not attribute id, what are you trying to find?
Also See: http://api.jquery.com/category/selectors/