CODEWITHSUNDEEP
jqueryhtmlcss
nic
nic

Reputation: 169

Add a class to sibling a element if it's child has a specific class

I am wanting to use jQuery to remove a style from one element if the next sibling element contains a child(in this case a grandchild) with a specific class.

Even more particularly, I want to remove a border on a container if the very next container has the specific element class. That specific element is a box that has a line at the top, therefore the previous line is unneeded.

Example:

See the Pen target next sibling by nic (@nicwinn) on CodePen.

enter image description here

<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>

This is what I have so far.

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

But that just works all the time.

Upvotes: 0

Views: 863

Answers (3)

Poul Bak
Poul Bak

Reputation: 10929

Lookup the JQuery 'has()' selector. It seems it's made for you :-)

has()

Example from the doc:

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

Upvotes: 0

Barmar
Barmar

Reputation: 780798

Use .each() to loop over each of the elements. Then check the criteria of the next element. 

$(".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>

Upvotes: 0

dysfunc
dysfunc

Reputation: 2008

I'm not entirely sure what you're after but is this what you're looking for:

Change your .foo CSS rule to

.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>

Upvotes: 1

Related Questions