CODEWITHSUNDEEP
javascriptjqueryhtmlword-wrap
skycomputer2
skycomputer2

Reputation: 243

How can I wrap href to multiple elements in jquery

I'm trying to add a href tag and get the value of a div because I need to add that value on the href tag using jQuery, I have this code

<div class="field-items">
    <div class="field-item even">book
        <div class="icon-more_link"></div>
    </div>
    <div class="field-item odd">pencil
        <div class="icon-more_link"></div>
    </div>
</div>

I want to do this:

<div class="field-items">
    <div class="field-item even">
        <a href="search/book">book</a>
        <div class="icon-more_link"></div>
    </div>
    <div class="field-item odd">
        <a href="search/pencil">pencil</a>
        <div class="icon-more_link"></div>
    </div>
</div>

Could you please help me

Upvotes: 1

Views: 1008

Answers (3)

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

You can also try with Map function jquery map

var a = $("<a />");
$('.field-items > div.field-item').map(function(){
  $(this)
    .wrap($(a)
    .attr('href','search/'+$(this).text().trim()));  
   return $(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-items">
    <div class="field-item even">book
        <div class="icon-more_link"></div>
    </div>
    <div class="field-item odd">pencil
        <div class="icon-more_link"></div>
    </div>
</div>
<div class="field-items">
    <div class="field-item even">book-new
        <div class="icon-more_link"></div>
    </div>
    <div class="field-item odd">pencil-new
        <div class="icon-more_link"></div>
    </div>
</div>

Upvotes: 0

Ruhul Amin
Ruhul Amin

Reputation: 1779

You need to use .wrap function. More: http://api.jquery.com/wrap/

Here the code: 

$('.field-item').each(function(){

// to get text and remove any unwanted space
var link = $(this).text().trim(); 
$(this).wrap('<a href="search/'+ link +'"></a>');

});

JSfiddle: https://jsfiddle.net/Ljvjvbkq/23/

Upvotes: 4

Blue
Blue

Reputation: 23

This is what you need:

$(document).ready(function(){

      $('.field-item').each(function(){
        var search = $(this).text().trim();
        $(this).wrap('<a href="search/' + search + '"></a>');
      });

});

https://jsfiddle.net/obLzf5st/1/

Upvotes: 0

Related Questions