Выбирайте только внешние элементы первого слоя для каждого аккордеона

Question

Пожалуйста, посмотрите на мой пример ниже. Есть несколько аккордеонов. Если вы откроете их, на некоторых из них вы увидите красную линию вверху.

Мне нужна красная линия на каждом аккордеоне, но я не могу изменять / добавлять имена классов, изменяя HTML вручную. Потому что этот код генерируется моим приложением.

jsfiddle

jQuery(".panel-heading").addClass("accordion");
jQuery(".list-group").addClass("accordion-panel");

jQuery(".outer").find(".widget-static-block:first").addClass("red");

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion-panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.red { background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">AAA</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 1
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 2
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 3
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">BBB</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum A
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum B
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum C
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>

<div id="bar" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">CCC</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 10
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 20
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 30
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">DDD</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum AA
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum BB
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum CC
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Вам нужно использовать .children():

jQuery(".outer").children(".widget-static-block").addClass("red");

Вместо .find():

jQuery(".outer").find(".widget-static-block").addClass("red");

Метод .children () отличается от .find () тем, что .children () перемещается только на один уровень вниз по дереву DOM, в то время как .find () может перемещаться по нескольким уровням для выбора элементов-потомков (внуков, et c.) также.

В качестве альтернативы вы можете использовать указанный селектор c, чтобы найти только элементы первого уровня вниз.

jQuery(".outer").find("> .widget-static-block").addClass("red")

jQuery("p:first").css("background", "limegreen");

jQuery(".panel-heading").addClass("accordion");
jQuery(".list-group").addClass("accordion-panel");

jQuery(".outer").children(".widget-static-block").addClass("red");

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion-panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.red { background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">AAA</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 1
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 2
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 3
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">BBB</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum A
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum B
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum C
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>

<div id="bar" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">CCC</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 10
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 20
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 30
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">DDD</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum AA
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum BB
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum CC
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>