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.

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