如果子类有类，将类添加到特定的父id (纯Javasript)，则不添加jQuery。

Question

在这里输入代码

​

const child = document.querySelectorAll(".accordion span.xh_find");
const parents = document.querySelectorAll('[id^="acc-"]');

if (document.querySelector(".accordion span").classList.contains("xh_find")) {
  
parents.forEach(item => item.classList.add('xh_find_parent'));
// Hm, should not add class to all parents, only if children has class="xh_find"! HowTo?
}

.xh_find_parent {
  background-color: red;
}

<div class="accordion">

  <div id="acc-1">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>

  <div id="acc-2">
    <p>
      Text without class.
    </p>
  </div>
  
  <div id="acc-3">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>
  
  <div id="acc-4">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>
  
  <div id="acc-5">
    <p>
      Text without class.
    </p>
  </div>

</div>

​

这怎么可能呢？只有当子元素具有类"xh_find_parent“时，父id才会获得类"xh_find”。在我的代码示例中，所有这些都是用这个类进行扩展的。

Answer 1

一旦选择了parents

• 用forEach()循环它们
• 对于父母的每一项，(使用querySelector())检查是否有需要的类xh_find的子类。
• 如果该类至少存在一个子类，则将xh_find_parent类添加到项中。

​

// 
const parents = document.querySelectorAll('[id^="acc-"]');

parents.forEach(item => {
  const childHasClass = item.querySelector('.xh_find'); // <- yield 'null' if no children with that class

  if (childHasClass) {
    item.classList.add('xh_find_parent');
  }
})

.xh_find_parent {
  background-color: red;
}

<div class="accordion">

  <div id="acc-1">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>

  <div id="acc-2">
    <p>
      Text without class.
    </p>
  </div>

  <div id="acc-3">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>

  <div id="acc-4">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>

  <div id="acc-5">
    <p>
      Text without class.
    </p>
  </div>

</div>

​

Answer 2

一种方法是，守则中的解释性评论如下：

​

// we only really need to know two things for this solution,
// although we could also use a variable for the '.accordion';
// the 'needle' is the class-name we're searching for:
const needle = 'xh_find',
// the 'classToAdd' is the class we wish to add to the ancestor
// of the 'xh_find' elements:
      classToAdd = 'xh_find_parent';

// here we use a template-literal to concatenate the 'needle'
// variable into the selector for document.querySelectorAll();
// this is resolved to '.accordion .xh_find'; we then use
// NodeList.prototype.forEach() to iterate over the NodeList:
document.querySelectorAll(`.accordion .${needle}`).forEach(
  // here we use an Arrow function expression, to pass in
  // a reference to the current element-node of the
  // NodeList over which we're iterating,to the body of the
  // function.
  // In the function-body, we retrieve the first of the
  // element's ancestor elements that has an id attribute:
  (el) => el.closest('[id]')
            // and then we use the Element.classList API:
            .classList
            // to add the 'classToAdd' value to the
            // classes of the recovered ancestor:
            .add(classToAdd)
);

/* The CSS is irrelevant to the demo; however:
   this is a simple reset, to have all elmenents
   and pseudo-elements use the same layout, margin,
   padding and font: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

/* using grid layout as that maintains the desired
   layout; but allows the use of 'gap' to place a
   regular space between adjacent elements without
   having to work with margins: */
.accordion {
  display: grid;
  gap: 0.5em;
  /* places a margin on the block axis of the content,
     the top and bottom in left-to-right/top-to-bottom
     languages: */
  margin-block: 1em;
  /* defines the margin on the inline-axis of the content,
     the left and right in left-to-right (and right-to-left)
     languages: */
  margin-inline: auto;
  /* defines the width as 70 viewport-widths (70% of the
     width of the viewport), but sets a minimum width of
     20em and a maximum width of 600px: */
  width: clamp(20em, 70vw, 600px);
}

.xh_find_parent {
  background-color: red;
}

<div class="accordion">

  <div id="acc-1">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>

  <div id="acc-2">
    <p>
      Text without class.
    </p>
  </div>

  <div id="acc-3">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>

  <div id="acc-4">
    <p>
      Text with <span class="xh_find">class</span>.
    </p>
  </div>

  <div id="acc-5">
    <p>
      Text without class.
    </p>
  </div>

</div>

​

JS Fiddle演示。

参考文献：

• CSS：
  • clamp()。
  • display。
  • gap。
  • margin-block。
  • margin-inline。

• JavaScript：
  • 箭头函数。
  • document.querySelectorAll()。
  • API接口。
  • Element.closest()。
  • NodeList.prototype.forEach()。
  • 模板文字。