How to only target elements with the same parent
<p>I'm working on creating my own widgets for wordpress. I have the following code:</p>

<pre><code>jQuery("body").on("change", "select[id=elementselect]", function(){  
    var val = jQuery(this).val();
    jQuery('#element1,element2').hide().filter('#element'+val).fadeIn('slow')
})
</code></pre>

<p>The code works great but if the user has two or more widgets in the sidebar it will affect all of them. Since they are based on a class i can't give the elements in the widget unique names. So, is it possible to only target the elements which share the same parent as the "select" element i'm currenly using? </p>

<p>The HTML looks like this (simplified):</p>

<pre><code>&lt;form&gt;
  &lt;fieldset&gt;
    &lt;select id="elementselect"&gt;
      &lt;option value="1"&gt;&lt;/option&gt;
      &lt;option value="2"&gt;&lt;/option&gt;
    &lt;/select&gt;
  &lt;/fieldset&gt;

  &lt;fieldset id="element1"&gt;&lt;/fieldset&gt;

  &lt;fieldset id="element2"&gt;&lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>

<p>Or is there another solution?</p>

<p>EDIT: I've fixed it now. Just changed the id's to classes and used .closest()</p>

<p>thank you all</p>
