Q: Only select outer elements of first layer for each accordion Please look at my example below. There are some accordions.
If you open them, you will see a red line at the top on some of them.
I need the red line on each accordion, but I am not allowed to change/add classnames by changing the HTML manually. Because this code is generated by my application.
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>



A: You need to use .children():
jQuery(".outer").children(".widget-static-block").addClass("red");
Instead of .find():
jQuery(".outer").find(".widget-static-block").addClass("red");

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

As an alternative, you can use a specific selector to find only the first level down elements.
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>


