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'); 
// -----------------------------------^^^^^^^^ 

...というように。

次いで、あるいは、その容器（data-name="grid"上記例えば、1つのレベル）まで行くclosestを使用して、共通の容器内全体構造をラップし、使用find。

---

サイドノート：私はそれが質問をするときに導入されただけの問題だ疑いがある、しかし兄弟の引用符が間違っている：

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

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

もの“文字が"（または'する必要があります、またはあなたの価値は引用符を全く必要としないという要件に合っているので、引用符は一切ありません）。