jquery dom traversal via parent/child

Question

I have several instances of

(".wrappingdivclass > .hovercontents > .hovercontent2")

on a page.. all need to behave independently but call the same jquery. As you can see its two blocks of identical HTML...

how would I go up/down the dom tree to keep the hover/showhide on ONLY the stuff within the wrappingclass div, and not affect everything the next wrappingclass div also.

<div class="wrappingclass" id="notthesecondone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff</p>
     <p class="hoverheading1">on hover display stuff1</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>
    <div class="wrappingclass" id="notthefirstone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff/hide stuff1</p>
     <p class="hoverheading1">on hover display stuff1/hidestuff</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>

Here is the jquery:

//does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent").show();
  //toggle the componenet with class msg_body
  jQuery(".hoverheading").hover(function()
  {
     jQuery(this).parent().children(".hovercontent").show()
    jQuery(this).parent().children(".hovercontent").siblings().hide();
  });
});

Atif · Answer 1 · 2012-12-12T18:21:24.953

0

Try replacing

jQuery(this).parent().children(".hovercontent").show()
jQuery(this).parent().children(".hovercontent").siblings().hide();

with

jQuery('.hovercontent').hide();
jQuery(this).closest('.hovercontent').show

Edit

Replace hover with mouseover

Final Edit,

Its acutally like this.. (inside DOM ready)

$("p[class^=hovercontent]").hide();
//toggle the componenet with class msg_body
$("p[class^=hoverheading]").mouseover(function() {
    $("p[class^=hovercontent]").hide();
    $(this).closest('.hoverheaders').next().find('p').eq($(this).index()).show();
});

Demo - http://jsfiddle.net/68UVj/

edited Dec 12 '12 at 18:21

answered Dec 12 '12 at 17:55

Atif

10,623
20
63
96

Also, you should name space the $ variable into jQuery on document-ready if you're concerned about issues with conflict. `jQuery(function($){ //code });` – Ohgodwhy Dec 12 '12 at 17:56
tried jQuery(this).next('.hovercontent1') and jQuery(this).closest('.hovercontent1') neither seems to work :-/ – C Southworth Dec 12 '12 at 18:06
how would that help? @Ohgodwhy – C Southworth Dec 12 '12 at 18:08
replace `hover` with `mouseover` – Atif Dec 12 '12 at 18:11
toggle on hover, need to avoid toggle off on mouseout. – C Southworth Dec 12 '12 at 21:10
then remove `$("p[class^=hovercontent]").hide();` from `mouseover` – Atif Dec 12 '12 at 21:14
I'll give it a shot today. Rephrasing the "p[class^hovercontent]" to "p.hovercontent" since its jquery. (? or does jQuery take that syntatx and I don't know?) Will post results. – C Southworth Dec 13 '12 at 14:18
jquery does supports that syntax, it means all classes starting with hovercontent. `^` is similar to `^` we use in regex – Atif Dec 13 '12 at 17:42

jquery dom traversal via parent/child

1 Answers1

Edit

Final Edit,