How to make a link out of text on the fly? -- JQuery beginner

Question

I have a bunch of these on a page:

<div class="item" id="555">
  <div class="wrapper>
    <p>Make Link One</p>
  </div>
  <p class="action">Make Link Two</p>
</div>

How can I dynamically make the 2 texts links based on the id 555? ie. They both should be links to http://555

There is a unique business requirement which is the reason they're not just normal hrefs to begin with.

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

You can just bind a click event handler to the containing div that uses it's own ID to redirect the user:

$('.item').on('click', function () {
    window.location = 'http://' + this.id;
});

If you have other content inside the container element that should not trigger the redirect then you can bind to the <p> elements inside the container:

$('.item').on('click', 'p', function () {
    window.location = 'http://' + $(this).parents('.item:first')[0].id;
});

BTW, IDs should not start with numbers. Here's a link to the correct syntax for IDs: What are valid values for the id attribute in HTML?

Note that .on() is new in jQuery 1.7. In the first example replaces the depreciated .bind() and in the second example it replaces the depreciated .delegate().

edited May 23 '17 at 10:34

Community

1
1

answered Nov 17 '11 at 21:20

Jasper

75,717
14
151
146

Is there a way to set styles on it upon hover so it looks like a normal link? (i.e. show cursor, underline, etc) – Jacob Nov 17 '11 at 21:23
1

That can be done with some CSS. `.item p:hover {text-decoration: underline;}`. You *can* use JavaScript but **I'd recommend CSS**: `$('.item').find('p').on('mouseenter', function () {$(this).css({'text-decoration':'underline'})}).on('mouseleave', function () {$(this).css({'text-decoration':'none'});});` – Jasper Nov 17 '11 at 21:28

score 1 · Answer 2 · answered Nov 17 '11 at 21:20

$('p').each(function(){
    var $this = $(this);
    var href = $this.parents('.item:first')[0].id;
    $this.wrap('<a href=http://"' + href + '">');
});

.each loops through the found p elements. It then looks for the parent iwth a class .item ($this.parents('.item:first')) to get the id. The [0] part turns the jQuery object into just a standard DOM element so that we can easily grab the id property from that element (you could also have done $this.parents('.item:first').attr('id') to stick with pure jQuery). Finally, we wrap the p in an anchor tag with the correct href.

If you use `.parents('.item:first')` you can support `
` tags at any level. — Jasper, Nov 17 '11 at 21:28

score 1 · Answer 3 · answered Nov 17 '11 at 21:38

$(document).ready(function(){

  $(".item p").each(function(){
  var t1 = $(this).text();
  var linkid = $(this).parents('.item:first').attr("id");


  $(this).parent().append('<a href="http://' + linkid + '">' + t1 + '</a>');
  $(this).remove();

  });


});

score 0 · Answer 4 · answered Nov 17 '11 at 21:53

I would do it like this, assuming that you’d like it to apply to every p which is a child of an element with the item class:

$(function(){
    $('.item p').each(function(){
        var $this = $(this);
        $this.contents().wrap($('<a>', { href: $this.closest('.item').attr('id') }));
    });
});

How to make a link out of text on the fly? -- JQuery beginner

4 Answers4