CODEWITHSUNDEEP
javascriptjquery
James Sampson
James Sampson

Reputation: 25

Javascript , jQuery - what have I done wrong?

$(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>

Upvotes: 0

Views: 116

Answers (5)

Andreas Grech
Andreas Grech

Reputation: 107950

Try:

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

Upvotes: 0

user113716
user113716

Reputation: 322462

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

Upvotes: 1

Tudor
Tudor

Reputation: 4164

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.

Upvotes: 0

Hooray Im Helping
Hooray Im Helping

Reputation: 5264

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

Upvotes: 0

BrunoLM
BrunoLM

Reputation: 100322

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.

Upvotes: 3

Related Questions