title: jQuery | Target grandparent siblings
body: <p>On change or on load, whenever a user selects a grid option, I am trying to add the class to pull-left or pull-right to the divs (<code>block_left</code>, <code>media_right</code>) that are sibling to the selector grandparent <code>grid</code>. However I am not able to select the siblings.</p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div data-name="grid"&gt;
      &lt;div class="label"&gt;
          &lt;label&gt;Grid&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="input"&gt;
          &lt;select&gt;
              &lt;option value="left_right"&gt;Left / Right&lt;/option&gt;
              &lt;option value="left_media"&gt;Content / Media&lt;/option&gt;
              &lt;option value="media_right" selected="selected"&gt;Media / Content&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-name=“block_left”&gt;&lt;/div&gt;
  
  &lt;div data-name=“media”&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the jQuery</p>
  
  <pre><code>function blockGrid() {
      var gridSelect = $('[data-name=”grid”] select');
  
      $(gridSelect).each(function( index ) {
          console.log( index + ": " + $( this ).val() );
  
          // On Load
          if($(this).val() == “media_right” ) {
              $(this).closest('[data-name="grid"]').find('[data-name="media"]').addClass('pull-xs-left');
              $(this).closest('[data-name="grid"]').find('[data-name="block_left"]').addClass('pull-xs-right');
          };
  
  
          // On Change
          $(this).change(function() {
              console.log('Grid changed to ' + $(this).val());
  
              if($(this).val() == “media_right” ) {
                  $(this).closest('[data-name="grid"]').find('[data-name="media"]').addClass('pull-xs-left');
                  $(this).closest('[data-name="grid"]').find('[data-name="block_left"]').addClass('pull-xs-right');
              } else {
                  $(this).closest('[data-name="grid"]').find('[data-name="media"]').removeClass('pull-xs-left');
                  $(this).closest('[data-name="grid"]').find('[data-name="block_left"]').removeClass('pull-xs-right');
              };
          });
      });
  };
  </code></pre>