Javascript , jQuery - what have I done wrong?

Question

$(document).ready(function () {
    $("href").attr('href', 'title');
});

$('a[href$=.jpg]').each(function () {
    var imageSrc = $(this).attr('href');
    var img = $('<img />').attr('src', imageSrc).css('max-width', '300px').css('max-height', '200px').css('marginBottom', '10px').css('marginTop', '10px').attr('rel', 'lightbox');
    $(this).replaceWith(img);
});
});

This is the jQuery code I have at the moment, which I want to change all links' href to the same as their title, before then embedding them in the page. Yet with the changing href to title bit in the code, it stops working. I'm new to Javascript so am definitely doing something wrong, just not sure what yet! Any help much appreciated!

Thank you guys

EDIT

This is the html that I want to change:

<p class="entry-content">Some interesting content<a href="http://example.com/index.php/attachment/11" title="example.com/file/testing-20101016T114047-2k5g3ud.jpeg" rel="external" class="attachment" id="attachment-11">http://example.com/index.php/attachment/11</a></p>

Answer 1

You are changing it wrong, you are trying to select href elements instead of a.

This fix should do it:

$("a[title]").each(function() {
    $(this).attr('href',$(this).attr('title'));
});

It will select all a elements with title and set the href with this value.

Answer 2

Here's a much more efficient way.

Since you're just replacing the <a> elements, there's really no need to change its href. Just select the <a> elements that end with jpg/jpeg, and use that attribute directly.

Example: http://jsfiddle.net/5ZBVf/4/

$(document).ready(function() {
    $("a[title$=.jpg],[title$=.jpeg]").replaceWith(function() {
            return $('<img />', {src:this.title, rel:'lightbox'})
                    .css({maxWidth: 300,maxHeight: 200,marginBottom: 10,marginTop: 10});
    });
});​

---

Your .each() is outside the .ready() function.

You can accomplish the href change easily like this:

$(document).ready(function () {
    $("a").attr('href', function() { return this.title; });
});

The .attr() method will accept a function where the return value is the new value of (in this case) href.

So the whole thing could look like this:

Example: http://jsfiddle.net/5ZBVf/3/

$(document).ready(function() {
    $("a[title]").attr('href', function() { return this.title; })
                 .filter('[href$=.jpg],[href$=.jpeg]')
                 .replaceWith(function() {
                     return $('<img />', {src:this.href, rel:'lightbox'})
                            .css({maxWidth: 300,maxHeight: 200,marginBottom: 10,marginTop: 10});
                 });
});

Answer 3

This line:

$("href").attr('href','title');

Is finding all href elements and replacing their href attr with the string 'title'. Since there is no such thing as an href element, Try this instead:

// for every anchor element on the page, replace it's href attribute with it's title attribute
$('a').each(function() {
  $(this).attr('href', $(this).attr('title');
});

Answer 4

Check this out: http://jsfiddle.net/TbMzD/ Seems to do what you want. Note: $(document).ready() is commented because of jsfiddle, you actually need it in your code.

Answer 5

Try:

$("a").each(function () {
    var $this = $(this);
    $this.attr('href', $this.attr('title'));
});