jquery - 如果一个元素的子元素有一个特定的类，则添加一个类来兄弟元素

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>