CODEWITHSUNDEEP
javascriptjqueryhtmlcss
B. Schure
B. Schure

Reputation: 5

child with element of class

I read the whole database but can't get the following working.

My aim is to color the rows in a table depending on a child's child element. I prefer when the innerhtml of the child element will be the name of the class of the row -element. But it's also OK when i select all <tr>-elements which have a <div>-element with class "red", and add a class "red" to that.

Simple solution

I want to add the class "red" to the <tr>-element by inspecting if there is a <div>-element with class "red".

<tr>
  <td>
    <div class="red">OK</div>
  </td>
  <td>
    this will color along
  </td>
</tr>

Example

I am able to add a class to the <tr>-element when there's a <div>-child in it. So this works:

$( "tr:has(div)" ).addClass( "red" );

But now I need to do this when and only when the <div> has class "red". So I tried:

$( "tr:has(div.hasClass( "red" ))" ).addClass( "red" );

You're allowed to laugh!! I hoped this would work.

Is there a way this can be done?

Even better but more difficult

I prefer to use the innerhtml of the <div>-element to give the class that name, but that seems to be some bridges too far?!

<tr>
  <td>
    <div class="restyle">red</div>
  </td>
  <td>
    this will color along
  </td>
</tr>

Even better but impossible?!

Actually I prefered doing it by css but I found out that is impossible.

Upvotes: 0

Views: 68

Answers (4)

indubitablee
indubitablee

Reputation: 8206

select the div first, than go up the tree from there using .closest()

simple solution:

$(document).ready(function() {
  $('div.red').closest('tr').addClass('red');
});
td {
  border: 1px solid black;
}
.red {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td>
        <div class="red">OK</div>
      </td>
      <td>
        this will color along
      </td>
    </tr>
  </tbody>
</table>

hard solution:

$(document).ready(function() {
  
  $('div.restyle').each(function() {
    var color = $(this).text();
    console.log(color);
    $(this).closest('tr').addClass(color);
  });
});
td {
  border: 1px solid black;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td>
        <div class="restyle">red</div>
      </td>
      <td>
        this will color along
      </td>
    </tr>
    <tr>
      <td>
        <div class="restyle">blue</div>
      </td>
      <td>
        this will color along
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Siderite Zackwehdex
Siderite Zackwehdex

Reputation: 6570

How about $('div.red').parents('tr:first').addClass('red') ?

SLaks' way (using :has() ) is also good, but it would also find tr that contains other tr that contains a red div. The code above affects only the first tr parent of red divs.

For the content of the div use the :contains() selector, but I wouldn't recommend it.

Upvotes: 1

moonwave99
moonwave99

Reputation: 22817

(Concerning the Even better but more difficult part:)

Even though I would never rely on an element content for styling its parent, you can use $.addClass:

$('tr').addClass(function(){
  return $(this).find('.restyle').text()
})

Upvotes: 0

SLaks
SLaks

Reputation: 887285

:has() takes a selector, not Javascript code.

You want tr:has(div.red)

Upvotes: 1

Related Questions