Question

我读了整个数据库，但无法完成以下工作。

我的目标是根据孩子的子元素为表中的行着色。我更喜欢当child元素的innerhtml将是行-element的类的名称。但是当我选择所有<tr> - 具有{“1}} - 元素并且类为”红色“的元素时，也可以添加”红色“类。

简单解决方案

我想通过检查是否存在类别为“red”的<div> - 元素，将类“red”添加到<tr> - 元素。

<div>

Example

我可以在<tr> <td> <div class="red">OK</div> </td> <td> this will color along </td> </tr> - 元素中添加一个类，其中包含<tr> - 子元素。所以这有效：

<div>

但是现在我需要在$( "tr:has(div)" ).addClass( "red" );有“红色”等级时才这样做。所以我试过了：

<div>

你被允许笑！我希望这会奏效。

有没有办法可以做到这一点？

更好但更难

我更喜欢使用$( "tr:has(div.hasClass( "red" ))" ).addClass( "red" ); - 元素的innerhtml来为类命名，但这似乎是一些桥梁太远了？！

<div>

更好但不可能？！

其实我更喜欢用css来做，但我发现这是不可能的。

Answer 1

:has()采用选择器，而不是Javascript代码。

您想要tr:has(div.red)

Answer 2

$('div.red').parents('tr:first').addClass('red')怎么样？

SLaks的方式（使用:has()）也很好，但它也会找到包含其他包含红色div的tr的tr。上面的代码只影响红色div的第一个tr父级。

对于div的内容使用:contains()选择器，但我不推荐它。

Answer 3

（关于更好但更困难的部分：）

即使我永远不会依赖元素内容来为其父级设置样式，也可以使用$.addClass：

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

Answer 4

首先选择div，然后使用.closest()

从那里上到树

简单解决方案：

＆＃13;

$(document).ready(function() {
  $('div.red').closest('tr').addClass('red');
});

＆＃13;

td {
  border: 1px solid black;
}
.red {
  background: red;
}

＆＃13;

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

＆＃13;

硬解决方案：

＆＃13;

$(document).ready(function() {
  
  $('div.restyle').each(function() {
    var color = $(this).text();
    console.log(color);
    $(this).closest('tr').addClass(color);
  });
});

＆＃13;

td {
  border: 1px solid black;
}
.red {
  background: red;
}
.blue {
  background: blue;
}

＆＃13;

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

＆＃13;

孩子与班级元素

4 个答案: