jQuery |目标祖父母兄弟姐妹

Question

在更改或加载时，无论何时用户选择一个网格选项，我试图将该类添加到选择器祖父母grid的div（block_left，media_right）的左拉或右拉。但是我无法选择兄弟姐妹。

下面是HTML

<div data-name="grid"> 
    <div class="label"> 
     <label>Grid</label> 
    </div> 
    <div class="input"> 
     <select> 
      <option value="left_right">Left/Right</option> 
      <option value="left_media">Content/Media</option> 
      <option value="media_right" selected="selected">Media/Content</option> 
     </select> 
    </div> 
</div> 

<div data-name=“block_left”></div> 

<div data-name=“media”></div> 

这里是jQuery的

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'); 
      }; 
     }); 
    }); 
}; 

Answer 1

find不看弟妹，它看起来对后代。 siblings寻找兄弟姐妹。

所以

$(this).closest('[data-name="grid"]').siblings('[data-name="media"]').addClass('pull-xs-left'); 
// -----------------------------------^^^^^^^^ 

...等等。

或者，包裹整个结构在共同的容器中，使用closest上去到容器（例如，如上data-name="grid"一个电平），然后使用find。

---

附注：我怀疑这只是你问这个问题时，引入了一个问题，但对兄弟姐妹的报价是错误的：

<div data-name=“block_left”></div> 

<div data-name=“media”></div> 

这些“字符应该是"（或'，或者根本没有报价，因为你的价值发生符合不需要报价的要求）。