Ограничение JavaScript для работы только внутри элемента

Question

Возможно ли выполнить скрипт только внутри элемента? Например, у меня есть список <div> элементов с двумя <span> внутри каждого элемента. Я проверяю с помощью JS, есть ли у какого-либо div назначенный ему класс «boo». Если это так, он должен добавить класс «hide» к <span> с классом «child2», если нет, он должен добавить класс «hide» к другому <span> с классом «child1». Вот пример того, что я имею в виду.

<div> <span class="child1"></span><span class="child2"></span> </div>
<div class="boo"> <span class="child1"></span><span class="child2"></span> </div>

Если бы я теперь использовал скрипт, подобный следующему, он испортил бы весь список, потому что он также добавил бы класс «скрыть» к другому элементы. Как я могу решить это?

var check = $("div").hasClass("boo");
                  if (check === true) {
                  $( ".child2" ).addClass("hide");
                  }
                  else {
                    $( ".child1" ).addClass("hide");
                  }

Answer 1

Проблема в том, что ваш код просматривает только первые div и все элементы .child1 и .child2.

Чтобы исправить это, измените ваш селектор для выбора по наличию (или отсутствие) .boo класс:

$('div.boo .child2').addClass('hide');
$('div:not(.boo) .child1').addClass('hide');

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> 
  No boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span> 
  </span>
</div>
<div class="boo">   
  Boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span> 
  </span>
</div>

Также обратите внимание, что если это делается только по причинам пользовательского интерфейса, то вам вообще не следует использовать JS , Это может быть достигнуто только за CSS:

div:not(.boo) .child1,
div.boo .child2 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  No boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span>
  </span>
</div>
<div class="boo">
  Boo
  <span class="child1">
    Child 1
    <span class="child2">Child 2</span>
  </span>
</div>

Наконец, обратите внимание, что в элементах span отсутствует закрывающий тег. Я предполагаю, что это просто опечатка в вопросе, поэтому я исправил это в этом примере.

Answer 2

Вам не нужно jQuery для этого:

let children = document.querySelectorAll('div.boo .child2, div:not(.boo) .child1');

for (var j = 0; j < children.length; j++) {
  children[j].classList.add("hide");
}

Вы также пропускаете некоторые закрывающие тэги в вашем html, я полагаю, это просто опечатка.

Также, как указано выше, если это просто вопрос презентации, вы можете выполнить sh это простым css.