change url using jquery for specific css classes

Question

I am using below code to covert all links in a page - Now i want this conversion to happen only for certain parts of page and not for complete page. I am sure this can be done to specific div tags

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
 $( document ).ready(function() {  
 $("a[href^='http']").each(function() {
 var value = $(this).attr('href');
 $(this).attr('href','<url>/pqr.php?'+value);
});
});</script>

Please suggest how can i achive this link conversion for specific div tags.

Example to explain problem statement - Consider following code snippet on which url conversion is required for only class="testclass"

  <div class="messageContent">     
    <article>
        <blockquote class="messageText SelectQuoteContainer ugc baseHtml">

            <div class="testclass">
                <a href="http://www.amzon.in" target="_blank" class="externalLink" rel="nofollow">Amazon 1</a>
            </div>


<i>eps</i><br>
<span style="text-decoration: underline"><b><i>How to avail this offer </i></b></span><br>
<i>Add product into the cart<br>
Login or register<br>
Enter your shipping details<br>
Make the Final Payment.</i><br>
<span style="text-decoration: underline"><span style="font-size: 12px"><b>link</b>       </span></span><br>
<a href="http://www.amzon.in" target="_blank" class="externalLink" rel="nofollow">Amazon 2</a>
                <div class="messageTextEndMarker">&nbsp;</div>
            </blockquote>
            </article>
     </div>

I want to convert only the first url (AMAZON 1) and not the second url (AMAZON 2)

Test snippet on js fiddle - http://jsfiddle.net/bontp6jk/4/

$('.testclass').find("a[href^='http']").each(function() {... ? — axel.michel
– axel.michel, Commented Dec 28, 2014 at 18:43
Yes i thought of the exact same thing.. But could not get it to work as I am preety new in jquery :( — Chintu Ji
– Chintu Ji, Commented Dec 28, 2014 at 18:43
Sounds like duplicate of stackoverflow.com/questions/27678559/… but improved question. Now just wondering the purpose of using multiple accounts? — A. Wolff
– A. Wolff, Commented Dec 28, 2014 at 18:49

Jean-Paul · Accepted Answer · 2014-12-28 18:46:41Z

2

What you want to do is first define the parent class and then for that class select all the link elements.

In jQuery you can use multiple selectors that works as follows:

$("#test")          // select div 'test'
$(".myClass")       // select class 'myClass'
$(".myClass #test") // select div 'test' in class 'myClass'
$("a")              // select all link elements

Therefore, what you need is the following: $(".testclass a") which selects all link elements in the class .testclass. Then you can use jQuery .each() function to do something with the link elements.

$( document ).ready(function() {
    $(".testclass a").each(function() {
        var value = $(this).attr('href');
        alert(value);
    });
  });

jsFiddle

answered Dec 28, 2014 at 18:46

Jean-Paul

21.3k11 gold badges67 silver badges91 bronze badges

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

Comments

Prashant Kumar · Accepted Answer · 2014-12-28 18:46:10Z

0

Try this

   $( document ).ready(function() {
        $("a[href^='http']").each(function() {
            var $this = $(this);            
            var value = $this.attr('href');
            if($this.closest('.testclass').length!==0){
            $this.attr('href','http://test.com/url.php?url=' + value + '&uid=test&origin=forum');
            $this.attr("target","_blank");    
}
        });
      });

answered Dec 28, 2014 at 18:46

Prashant Kumar

3862 silver badges9 bronze badges

3 Comments

axel.michel Over a year ago

This is not a good approach, because you'll loop over every available A-tag and then filter the results, instead of using the more precided selector first: $('.testclass').find("a[href^='http']")...

Prashant Kumar Over a year ago

I can understand that by simply using selector $(".testclass a") can serve the purpose .. But here i am assuming that you might need to do some bit of code for other "anchor" too in future.

Prashant Kumar Over a year ago

Totally agree with @axel.michel .. $(".testclass a") will be way faster than $("a[href^='http']") :) . but i think startedWith "^" selector is used with a purpose here.

Collectives™ on Stack Overflow

change url using jquery for specific css classes

2 Answers 2

jsFiddle

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related