如果元素的子级具有特定的类，则将其添加到同级元素

Question

如果下一个兄弟元素包含具有特定类的孩子（在本例中为孙），我想使用jQuery从一个元素中删除样式。

更具体地说，如果下一个容器具有特定的元素类，我想在容器上删除边框。该特定元素是一个在顶部具有一行的框，因此不需要前一行。

示例：

请参见target next sibling上nic（@nicwinn）的笔CodePen。

<div class="example">Unwanted Line
  <div class="row">
    <div class="columns foo foobar"><!--foobar added by jquery-->
      <h1>Heading</h1>
    </div>
  </div>
  <div class="row"><!--bar exists in next sibling of ".row .columns.foo"-->
    <div class="columns">
      <div class="bar">
        Boxy Content. The line above me isn't helping.
      </div>
    </div>
  </div>
  <div class="row">
    <div class="columns">
      <p>
        Open Content. I look fine with a box above me.
      </p>
    </div>
  </div>
</div>
<div class="example">Wanted line
  <div class="row">
    <div class="columns foo"><!--no foobar added by jquery-->
      <h1>Heading</h1>
    </div>
  </div>
  <div class="row">
    <div class="columns">
      <p>
        Open Content. I look fine with a line above me.
      </p>
    </div>
  </div>
  <div class="row">
    <div class="columns">
      <div class="bar"><!--bar  added by jquery-->
        Boxy Content
      </div>
    </div>
  </div>
</div>

这是我到目前为止所拥有的。

if ( $('.bar').length ) {
    $( ".foo" ).addClass( "foobar" );
}

但这一直都有效。

Answer 1

我不确定您想要的是什么，但这是您要找的东西吗

将.foo CSS规则更改为

.row + .row .foo {
  border-bottom: 1px solid;
  margin-bottom: 0;
}

body {
  text-align:center;
  margin:1rem;
}
.columns {
  margin-bottom:1rem;
}

.row + .row .foo {
  border-bottom: 1px solid;
  margin-bottom: 0;
}

.bar {
  background:brown;
  padding:1rem;
  color:white;
  font-size:1.5rem;
}

p {
  padding:1rem;
  font-size:1.5rem
}

<lable>Example</lable>
<div class="row">
  <div class="columns foo foobar">
    <h1>Heading</h1>
  </div>
</div>
<div class="row">
  <div class="columns">
    <div class="bar">
      Stuff That Matters
    </div>
  </div>
</div>
<div class="row">
  <div class="columns">
    <p>
      Other Stuff That Doesn't Matter
    </p>
  </div>
</div>

<div class="row">
  <div class="columns foo foobar">
    <h1>Heading</h1>
  </div>
</div>
<div class="row">
  <div class="columns">
    <p>
      Other Stuff That Doesn't Matter
    </p>
  </div>
</div>
<div class="row">
  <div class="columns">
    <div class="bar">
      Stuff That Matters
    </div>
  </div>
</div>

Answer 2

使用.each()遍历每个元素。然后检查下一个元素的条件。

$(".row:has(.foo)").each(function() {
  if ($(this).next().find(".bar").length) {
    $(this).addClass("foobar");
  }
});

body {
  text-align: center;
  margin: 1rem;
}

.columns {
  margin-bottom: 1rem;
}

.foo {
  border-bottom: 1px solid;
  margin-bottom: 0;
}

.bar {
  background: brown;
  padding: 1rem;
  color: white;
  font-size: 1.5rem;
}

p {
  padding: 1rem;
  font-size: 1.5rem
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable>Example</lable>
<div class="row">
  <div class="columns foo foobar">
    <h1>Heading</h1>
  </div>
</div>
<div class="row">
  <div class="columns">
    <div class="bar">
      Stuff That Matters
    </div>
  </div>
</div>
<div class="row">
  <div class="columns">
    <p>
      Other Stuff That Doesn't Matter
    </p>
  </div>
</div>

<div class="row">
  <div class="columns foo foobar">
    <h1>Heading</h1>
  </div>
</div>
<div class="row">
  <div class="columns">
    <p>
      Other Stuff That Doesn't Matter
    </p>
  </div>
</div>
<div class="row">
  <div class="columns">
    <div class="bar">
      Stuff That Matters
    </div>
  </div>
</div>

Answer 3

查找JQuery的“ has（）”选择器。看来是为您准备的：-）

has()

文档示例：

$( "li" ).has( "ul" ).css( "background-color", "red" );