CODEWITHSUNDEEP
jquerythis
webworker
webworker

Reputation: 357

jQuery this to show one element

I have the following jQuery 

$('td a').hover(function(){
  $(this).find('div.productPopUp').show();
});

and this HTML

<td>text</td>
   <td><a href="#">text</a></td>
   <div class="productPopUp">
     <h1>text</h1>
     <p>blah, blah</p>                          
   </div>
<td>

<td>text</td>
     <td><a href="#">text</a></td>
     <div class="productPopUp">
        <h1>text</h1>
        <p>blah, blah</p>                           
     </div>
 <td>

I want the jQuery to show only the hovered link, but it does not work. I'm not sure if I am using this in the wrong place or wrong context. (I assumed this, used here referred to what is hovered over?

Can anyone point me in the right direction?

Thanks

Upvotes: 1

Views: 111

Answers (3)

adeneo
adeneo

Reputation: 318372

First off, you need some valid markup, jQuery can not always find elements in strange invalid markup?

<table>
    <tr>
       <td>text</td>
       <td><a href="#">text</a></td>
       <td class="productPopUp">
          <h1>text</h1>
          <p>blah, blah</p>                          
       </td>
    </tr>
    <tr>
    <td>text</td>
         <td><a href="#">text</a></td>
         <td class="productPopUp">
           <h1>text</h1>
           <p>blah, blah</p>                           
         </td>
    </tr>
​</table>​​​​​​​​​​

Then some jQuery, something like this maybe:

$('td a').on('mouseenter mouseleave', function() {
    $(this).parent().parent().find(".productPopUp").toggle();
});

And lastly a FIDDLE

Upvotes: 1

sparrow
sparrow

Reputation: 177

Maybe this?

$('td a').hover(function(){
  $(this).parent().sibling('div.productPopUp').show();
});

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87083

$('td a').hover(function(){
  $(this).parent().next('div.productPopUp').show();
});

Upvotes: 0

Related Questions