Replace URL value with Jquery

Question

I have the following HTML

<div class='tile'>
    <a href='http://test-site.local' >
        <div class='tileContents'>
            <div class='tileImage'>
                <i class='icon-'></i>
            </div>
            <div class='tileCaption'>
                <h4>Logos</h4>
                <p></p>
            </div>
        </div>
    </a>
</div>

<div class='tile'>
    <a href='http://test-site.local' >
        <div class='tileContents'>
            <div class='tileImage'>
                <i class='icon-'></i>
            </div>
            <div class='tileCaption'>
                <h4>Adverts</h4>
                <p></p>
            </div>
        </div>
    </a>
</div>

I would like to update the href property to any URL I wish using the values of the h4 tags as a way to target and differentiate the two DIVs as these have the same class name.

So for example I would like to update the URL in the a tag of the first div to:

<a  href="http://www.google.com">

so if the value of the h4 tag = "Logos" then update the URL to "http://www.google.com"

And the same for the second DIV:

<a href="http://www.yahoo.com">

so if the value of the h4 tag = "Adverts" then update the URL to "http://www.yahoo.com"

I have the following but I don't think I am getting the selectors correctly:

<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>  
<script type="text/javascript">
$(document).ready(function(){  
    var value = $('div.tile h4').html();
    if (value = "Logos");
    $("DIV.tile a").attr("href", "http://www.google.com");
    if (value = "Adverts");
    $("DIV.tile a").attr("href", "http://www.yahoo.com");
});
</script>

Any help with this would be appreciated..

Archy Will He · Accepted Answer · 2013-10-09 15:22:08Z

3

Go through every tile and change its children('a')'s href

$('.tile').each(function(){
   $(this).children('a').attr("href", "http://test-site.local/"+$(this).find('h4').text());
});

The difference between .find() and .children() is that .find() finds what you want inside the element while .children() only travels a single level down the DOM tree (so it's faster).

Use .text() to get the word and simply put it behind the url rather than using if statements (so it will be faster).

edited Oct 9, 2013 at 15:22

answered Oct 9, 2013 at 15:16

Archy Will He

9,8074 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Alpha · Accepted Answer · 2013-10-09 21:30:42Z

2

You may try this

$('div.tile').each(function(){
    var a = $(this).find('a:first');
    a.attr('href', a.attr('href') +'/'+ $(this).find('.tileCaption h4').text());
});

DEMO

Update : After a long chat with OP I got what was the requirement and this is the solution :

var urls = {
    'Logos':'http://www.google.com/',
    'Adverts':'http://www.yahoo.com/'
};

$('div.tile').each(function(){
    var a = $(this).find('a:first');
    a.attr('href', urls[$(this).find('.tileCaption h4').text()]);
});

DEMO.

edited Oct 9, 2013 at 21:30

answered Oct 9, 2013 at 15:28

The Alpha

147k30 gold badges294 silver badges313 bronze badges

7 Comments

Dev P Over a year ago

This worked perfectly and without using if statements. My jquery worked in updating the URLs but it was setting the same URL for all the divs. Excellent answer

Dev P Over a year ago

Lastly what if I wanted to change the URL to something different than the value of the h4 tag? I now remember why I was using the if statement in the first place..

The Alpha Over a year ago

@DanielPerez, Here $(this).find('.tileCaption h4').text() is adding the h4 text, so you may change this part with the content you want to replace.

Dev P Over a year ago

Thanks for this, but I think this will give the same URL to the a tag on both DIVs. What I need to do is to be able to do is to give different URL values to the a tags in the DIVs if that makes sense

The Alpha Over a year ago

@DanielPerez, Maybe i'm confused bur a.attr('href') part is adding the source url(href", "http://test-site.local) then +'/'+ adds the slash and then $(this).find('.tileCaption h4').text() adds the rest from the h4, so if it makes you clear.

|

LeGEC · Accepted Answer · 2013-10-09 15:14:20Z

1

First off : the correct selector syntax for a class attribute is .className, not #className (#className would search for a node who's id is "className").

Then : you should iterate through your nodes, and repeatedly call a function on each one of them. Use the .each() function :

$('.tile').each(function(){
     //when this function executes, 'this' points to the current node

     // $(this).find(...) will look only through the descendants of 'this'
     var h4 = $(this).find('h4').html();

     $(this).find('a').attr('href', "http://test-site.local/"+h4 );
});

answered Oct 9, 2013 at 15:14

LeGEC

53.4k5 gold badges69 silver badges127 bronze badges

Comments

Spokey · Accepted Answer · 2013-10-09 15:16:48Z

0

$('.tile').each(function () {
    $('> a', this).attr('href', function(){
        return this.href + $(this).find('h4').text();
    });
});

answered Oct 9, 2013 at 15:16

Spokey

11k2 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

Replace URL value with Jquery

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related