CODEWITHSUNDEEP
javascriptjqueryhtml
Dev P
Dev P

Reputation: 1187

Replace URL value with Jquery

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..

Upvotes: 1

Views: 3197

Answers (4)

The Alpha
The Alpha

Reputation: 146269

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.

Upvotes: 2

Archy Will He
Archy Will He

Reputation: 9787

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).

Upvotes: 3

Spokey
Spokey

Reputation: 10994

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

Upvotes: 0

LeGEC
LeGEC

Reputation: 52176

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

Upvotes: 1

Related Questions