CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chintu Ji
Chintu Ji

Reputation: 11

change url using jquery for specific css classes

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/

Upvotes: 0

Views: 1794

Answers (2)

Jean-Paul
Jean-Paul

Reputation: 21180

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

Upvotes: 2

Prashant Kumar
Prashant Kumar

Reputation: 386

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

Upvotes: 0

Related Questions