Search jQuery

jQuery Forum

Using jQuery

jgossage

Problem using jquery .each

in Using jQuery • 11 years ago

I have the following HTML:

<!DOCTYPE html>

<html>

<head>

//Change a single directory

function changeDirectory(attrib, odir, ndir) {

var re = "/$.\/" + odir + "\//";

var srcv = $(this).attr(attrib);

var nv = srcv.replace(re, ndir);

}

</script>

</head>

<body>

<button id="spanishButton" lang="spa" type="button"

title="Tomá usted a una página en Español" value="Español">

<img src="images/large/spain-map-with-flag.png" width=110

height=80/></button>

$("#spanishButton > img").each(changeDirectory("src", "large", "medium"));

</script>

</body>

</html>

The intent is to change the path to the image associated with a button. When I load the page, I get "undefined" returned from line 2 of the function "changeDirectory" which suggests that $(this) is not the jquery object for the image used with the button.

Can anyone see what I am doing wrong or suggest an alternative way of reaching my objective.

Replies(3)

dsvick

Re: Problem using jquery .each

11 years ago

Your code that runs each is being run as soon as the code is processed by the browser, it is not even waiting for the document to be ready like it would if it were in the ready handler.

Since you are working with the button and the image you should be able to add a ready handler and move your code to it. If that doesn't work you may need to use load (http://api.jquery.com/load-event/) and wait until the image is there before working with the button.

Try this first:

$(document).ready(function (){
$("#spanishButton > img").each(changeDirectory("src", "large", "medium"));
});

If that doesn't work then give this a shot:

$(window).load(function (){
$("#spanishButton > img").each(changeDirectory("src", "large", "medium"));
});

Dave

jgossage

Re: Re: Problem using jquery .each

11 years ago

Sorry I stripped down the code too much. The original code was started from a Ready handler which in turn started a Resize window handler. The original idea was to change the image URL to a smller image as the user made the window smaller. In that context I was still getting the problem of what appears to be an incorrect Jquery object for the image on the button in the hangeDirectory function, leading to the "src" attribute being undefined.

kbwood.au

Re: Problem using jquery .each

11 years ago

The problem is that you are not using each properly. It expects as its parameter a function that itself takes index and value as parameters. You are actually calling changeDirectory and passing its result to the each function. You don't even need to use each as you can pass a function to the attr function directly. Try this instead:

$(function() {
$('#spanishButton > img').attr('src', function(i, value) {
return value.replace(/\/large\//, '/medium/');
});
});

Top Reply

Response title

Attachments

jQuery Forum

Problem using jquery .each

Replies(3)

Re: Problem using jquery .each

Re: Re: Problem using jquery .each

Re: Problem using jquery .each

Statistics

Tags

Actions

Related Posts