I'm unable to traverse the DOM from an <img> to a <td>...?

Question

Overview

I greatly appreciate any help with this. I'm sure it's "easy" but I can't figure it out. I am having to use selectors to choose a unique image file name. I'm then needing to replace the <td> that is one column to the right of the <td> that the <img> is in.

I have the current website and I also made a diagram to help explain this better. Check the following two links: Website: http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks Diagram: http://goo.gl/Q3Uif

The Problem

The link to the website above doesn't have a problem. We have a "franchise" custom modification in our oscommerce. Only customers with certain accounts can log into where I'm needing help. The diagram I made describes it, simply enough. Just so you have all the "pieces" of my "puzzle", here is how I'm doing the .replaceWIth() for the main site. This example is for the top row...I have one of these for every row I need to modify.

 $("a[href$=/Premium-Security-Laser-Check].smallTextLink").parent()
 .replaceWith('<td class="productListing-data" style="border-left:1px solid #FFF; border-top:1px solid #FFF; border-bottom:1px solid #808080; border-right:1px solid #808080;"><div class="leftSide"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="smallTextLink">Premium Security Laser Check</a><ul style="line-height: 1.5em; font-size: 11px; margin-left: -15px;"><li style="color:red;"><strong>Buy 500 Checks, Get 500 Free Special!</strong></li><li>More than 8 security features</li><li>Thermochromic Ink</li><li>8.5" x 11" sheet 24lb MICR paper</li><li>2 perforations @ 3.5" x 7"</li></ul><div class="moreInfoButtonsNew"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="positive"><img src="http://writeguard.com/catalog/images/new_layout/icons/information.png" alt=""/>More Info</a></div></div><div class="rightSide"><p class="ourPrice">Starting At:<br>$39.50</p></div></td>');

That is not efficient at all, I assume. But just for this problem I'm having now, I need to be able to do what I described at the top. Select the <img> by it's filename, then navigate the DOM so I can use .replaceWith() to achieve the same thing I described above. I've tried a lot of different selectors but none of them work. It always ends up making table data inside table data inside table data until the page is literally 10 feet long. I don't know where I'm going wrong.

I can happily provide more details if necessary. I'm obviously not very experienced with jQuery and my methods are probably a nightmare. I want to learn the correct, efficient way to program with jquery soon. THANK YOU VERY MUCH FOR YOUR HELP!

Answer 1

I believe the problem is with your selector.

I don't believe $("a[href$=/Premium-Security-Laser-Check].smallTextLink") will actually grab anything.

Try this:

$('a.smallTextLink[href$="Premium-Security-Laser-Check"]').click(function()
{
    alert('clicked the security laster check small text link');
});

If that works, then you should be able to just change your selector and have your replacewith work.

$('a.smallTextLink[href=/Premium-Security-Laser-Check]').parent() .replaceWith('<td class="productListing-data" style="border-left:1px solid #FFF; border-top:1px solid #FFF; border-bottom:1px solid #808080; border-right:1px solid #808080;"><div class="leftSide"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="smallTextLink">Premium Security Laser Check</a><ul style="line-height: 1.5em; font-size: 11px; margin-left: -15px;"><li style="color:red;"><strong>Buy 500 Checks, Get 500 Free Special!</strong></li><li>More than 8 security features</li><li>Thermochromic Ink</li><li>8.5" x 11" sheet 24lb MICR paper</li><li>2 perforations @ 3.5" x 7"</li></ul><div class="moreInfoButtonsNew"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="positive"><img src="http://writeguard.com/catalog/images/new_layout/icons/information.png" alt=""/>More Info</a></div></div><div class="rightSide"><p class="ourPrice">Starting At:<br>$39.50</p></div></td>');

Answer 2

The selector should be:

$('a.smallTextLink[href$="Premium-Security-Laser-Check"]')

And the structure of your table, you have:

<tr>
  <td>
    <div>
      <a href='....'>
      ..
      ..

So your jQuery statement needs to find the parent that is a td. parent() is returning the div. You wants parents('td:first') to grab the first parent that is a td element.

$('a[href$="Premium-Security-Laser-Check"].smallTextLink').parents('td:first')
  .replaceWith(....)