Develop Reference

Target all a elements in a page using jquery

I've tried every combination/individual selector and cannot figure this one out.
I have a 'wrapper' page that has two primary divs with id's:
toc-container
topic-container
The topic-container div has an html page loaded into it (that I cannot modify the source of), via the jquery .load function.
There are tags in those loaded pages that have href elements that I need to loop through and change. Here is the html of the loaded page:
<div id="help-content">
<table class="relatedtopics aboveheading" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width= "16">
<p class="bodytext"><img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist"><li class="numberlist">On the Logon window, click the <span class="procedureinterfaceelement">Change Password</span> link.</li><li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.</li><li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.</li><li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li></ol></div>
I have this function that is called after the page is loaded:
$('#help-content').find('a').each(function() {
var initHref = $(this).attr('href');
console.log(initHref);
var prefix = '?topicID=';
var newHref = prefix+initHref;
$(this).attr('href', newHref);
});
How can I change all href values in the page using jquery? I've tried targeting every selector possible : (

You can use the following vanilla JavaScript statement to get all anchor tags on the page
document.querySelectorAll('a')
Hope this helps you to get an initial idea on how to extend it for your solution. Happy coding.

1. Your code works, but you were only logging the original
href values. If you log again at the end of your code, you'd see the changes.
A more simple selector would be just $('#help-content a') and then you wouldn't need the .find() method call.
The JQuery .each() method is automatically passed arguments
that make referencing the element being enumerated a bit more simple,
so use that.
_target=self is only necessary if you are using the no
longer supported frameset element in your code. By default, links
open in the current window.
The vspace and hspace HTML attributes are deprecated.
All the other styling of your images (and your td elements, and really everything else) should really be done
with CSS. And, because all your styling is identical for each of
the images, a single CSS rule can set them all up.
Although your code does work, your prefix and newHref variables
aren't really necessary since you only use them once.
// When the DOM is ready...
$(function(){
$('#help-content a').each(function(idx, el) {
var initHref = $(el).attr('href');
$(el).attr('href', '?topicID=' + initHref);
console.log("Original href: " + initHref, " - New href: " + $(el).attr('href'));
});
});
/* Don't use HTML to style your page. That's what CSS is for.
And, using CSS will remove the need for redundant HTML. */
#help-content img {
height:16px;
width:17px;
text-align:bottom;
border:none;
}
#help-content table.relatedtopics { border-collapse:collapse; border:none; border-spacing:0; }
#help-content table.relatedtopics tr { vertical-align:top; }
#help-content table.relatedtopics td { padding:0; width:16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help-content">
<table class="relatedtopics aboveheading">
<tr>
<td>
<p class="bodytext">
<a href="overview.htm">
<img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="accessing_solutions.htm">
<img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="best_practice_browser.htm">
<img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic">
</a>
</p>
</td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist">
<li class="numberlist">On the Logon window, click the
<span class="procedureinterfaceelement">Change Password</span> link.
</li>
<li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.
</li>
<li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.
</li>
<li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li>
</ol>
</div>

Add class for all same text

In my code I have:
<a class="choice" data-name="i_can_a_test_1">
<img class="img-responsive" src="image.png" >
</a>
<a class="choice" data-name="i_can_a_test_2">
<img class="img-responsive" src="image2.png" >
</a>
<table>
<tr><td name="i_can_a_test_1" id="name_cards">i_can_a_test_1</td></tr>
<tr><td name="i_can_a_test_2" id="name_cards">i_can_a_test_2</td></tr>
<tr><td name="cant_a_test_1" id="name_cards">cant_a_test_2</td></tr>
</table>
But now I want: if same, add class for all i_can_a_test_*
$('body').on("click",".choice", function(){
var same_text = $(this).data('name').slice(0,6);
var same = $( 'td[name^='+same_text+']' ).length;
**if same, add class for all "i_can_a_test_*"**
});
Do you know how I can do that? With each i think.

You can achieve that with the attribute starts with selector.
Here: http://api.jquery.com/attribute-starts-with-selector/
$('body').on("click",".choice", function(){
var same = $(this).data('name').slice(0,13);
$('td[name^=' + same + ']').addClass('myClass');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="choice" data-name="i_can_a_test_1">
<img class="img-responsive" src="image.png"/>
</a>
<a class="choice" data-name="i_can_a_test_2">
<img class="img-responsive" src="image2.png"/>
</a>
<table>
<tr><td name="i_can_a_test_1">i_can_a_test_1</td></tr>
<tr><td name="i_can_a_test_2">i_can_a_test_2</td></tr>
<tr><td name="cant_a_test_1">cant_a_test_2</td></tr>
</table>

[...document.getElementsByClassName("*")].filter(e=>e.textContent.split("i_can_a_test_")[1]).forEach(e=>e.ClassName+=" someclass");
That does what youre asking for. However, this is bad style...

After changing id="name_cards" to class:
$('body').on('click', '.choice', function(e) {
var name = $(this).data('name').substr(0,6)
, $cards = $('.name_cards')
;
$cards
.removeClass('red')
.filter('[name^="'+name+'"]')
.addClass('red')
;
});
http://codepen.io/anon/pen/YNGqEQ

JavaScript Image changing error

just joined today loved this site already.
My Question is that. i am trying to create 6 Menus for my Web. like Eg { home, about us, service ..... } and i want the images to change whenever the users mouse hovers the menu's. I got the scrip actually from online souce. But it was an example for one image Here are the codes:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
And for the body
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
Now i tried to multiply these five times, ( just repeated the codes and changed the picture name ) - But whenever i hover on the images they do not change.
So my Q - is: How do you make the above code from a one image changer to 6?
Thanks !

Try using an id for each image (id must be unique, so there should be no elements with the same id):
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')" onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50" ID="but1" BORDER="0" />
</A>
And this code:
function roll_over(img_id, img_src) {
document.getElementById(img_id).src = img_src;
}

Ok I figured it out. Should set a unique name for every Image.
Try this code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script>
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>
<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
onmouseout="roll_over('but1', '10-roll.gif')">
<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
onmouseout="roll_over('but2', '1.gif')">
<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
NAME="but2" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
onmouseout="roll_over('but3', '2.gif')">
<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
NAME="but3" BORDER="0">
</A>
hope this works

getelementbyid not working

For http://jsfiddle.net/7HWxu/2/ I am trying to override the image loop with the four buttons so that when one is clicked the image changes. However, on click of "1" the image won't change. Any help greatly appreciated. Thanks,
Tom

The issue is that in this code:
<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/images/1_01.jpg" width="68" height="61" alt=""
onclick="document.getElementById('fadein').src='/1.jpg'">
</td>
<td>
<img src="/images/1_02.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_03.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_04.jpg" width="61" height="61" alt="">
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
You don't have any element with an id of "fadein". (And the div element that has a class of "fadein" doesn't have a meaningful src property.)
I note that you have jQuery on the page - rather than using inline event handlers, I suggest you use bind or delegate to manage the links:
// Your original code
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').
fadeOut().
next('img').
fadeIn().
end().
appendTo('.fadein');
}, 6500);
// Addenda
$("#Table_01").delegate("img", "click", function(e) {
// Show and hide images here based on what e.target is.
});
});

There's no element in your HTML with the "id" value "fadein", so the function returns null as it should. The outer containing <div> has the class "fadein", but not "id". You could change the <div> I guess:
<div class='fadein' id='fadein'>

<img /> inside <a> and SRC

I'm using this code for showing image inside any tag:
var imgs = $(this).find("p").attr("rel");
$('.hLeft img').attr("src", imgs);
Markup:
<div class="hLeft">
<h2></h2>
<a href="" class="mn">
</a>
<img src="" />
</div>
But when I insert <img> inside a, my script not working.
$('.mn img').attr("src", imgs);
Markup:
<div class="hLeft">
<h2></h2>
<a href="" class="mn">
<img src="" />
</a>
</div>
Why the $('.mn img').attr("src", imgs); not working with a tag?

the img is over written by this line:
$("a", $hleft).html(mansetText);

I think it deals with the css properties of class mn. div are displayed as block by default which is not the case for a. Try to add display:block; in the mn class to see the result.