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

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});
                 });
});