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> 

這些「字符應該是"（或'，或者根本沒有報價，因爲你的價值發生符合不需要報價的要求）。