jQuery | Целевые дедушки и бабушки-братья

Question

При изменении или при загрузке, когда пользователь выбирает параметр сетки, я пытаюсь добавить класс влево -лево или вправо-вправо к divs (, media_right), которые являются братьями и сестрами для дедушки и дедушки grid , Однако я не могу выбрать братьев и сестер.

Вот 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.

---

Side Примечание: Я подозреваю, что это просто вопрос вы представили, задавая вопрос, но котировки на братьев и сестер ошибаетесь:

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

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

Эти “ символы должны быть " (или ', или никаких кавычек вообще, так как ваши ценности соответствуют требованиям, не требующим котировок вообще).