javascript - 只为每个 Accordion 选择第一层的外部元素

Question

请看我下面的例子。有一些 Accordion 。如果您打开它们，您会在其中一些顶部看到一条红线。

我需要每个 Accordion 上的红线，但不允许我通过手动更改 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");

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.

作为替代方案，您可以使用特定选择器来仅查找第一级下层元素。

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>