为所有子元素提供类

Give all child elements classes

本文关键字：元素      更新时间：2023-09-26

我试图为每个组给子元素一个类。因此，每个组的孩子将为每个组具有相同的类，并且每个元素应该具有不同的类。

这是我到目前为止得到的： 

var $span = $("tr.keep td");
$span.attr('id', function (index) {
return 'td' + index;
});

问题是我有多个同一父级的组 - 此脚本通过所有组运行，而不是为每个组重复该类。我如何在此脚本上广告类似 .each 的内容，还是更好的方法？

.HTML：

  <tr class="keep">
   <tr class="test">
    <td rowspan="2"><a href="/"><img src="/" alt=""></a></td>
    <td colspan="3"><a href="/">text</a></td>
   </tr>
   <tr class="test">
    <td>MF216N/A</td>
    <td>Apple</td>
    <td class="outofstock">0</td>
    <td>1&nbsp;054,24SEK</td>
    <td><input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')"></td>
   </tr>
 </tr>

  <tr class="keep">
   <tr class="test">
    <td rowspan="2"><a href="/"><img src="/" alt=""></a></td>
    <td colspan="3"><a href="/">text</a></td>
   </tr>
   <tr class="test">
    <td>MF216N/A</td>
    <td>Apple</td>
    <td class="outofstock">0</td>
    <td>1&nbsp;054,24SEK</td>
    <td><input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')"></td>
   </tr>
 </tr>

使用tr.test选择器选择所有tr类为.test元素。使用 .each 迭代此选定元素，并查找td元素，这些元素是selected-tr元素的子元素。循环遍历td元素并使用.addClass考虑索引添加类。

注： tr元素不能将tr作为其子元素。那将是invalid-markup 

var $span = $("tr.test");
$span.each(function(i, elem) {
  $(elem).find('td').each(function(index) {
    $(this).addClass(function() {
      return 'td_' + (index + 1);
    });
  });
});
.td_1 {
  background: yellow;
}
.td_2 {
  background: green;
}
.td_3 {
  background: pink;
}
.td_4 {
  background: orange;
}
.td_5 {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr class="keep">
    <td rowspan="2">
      <a href="/">
        <img src="/" alt="">
      </a>
    </td>
    <td colspan="3"><a href="/">text</a>
    </td>
  </tr>
  <tr class="test">
    <td>MF216N/A</td>
    <td>Apple</td>
    <td class="outofstock">0</td>
    <td>1&nbsp;054,24SEK</td>
    <td>
      <input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
    </td>
  </tr>
  <tr class="keep">
    <td rowspan="2">
      <a href="/">
        <img src="/" alt="">
      </a>
    </td>
    <td colspan="3"><a href="/">text</a>
    </td>
  </tr>
  <tr class="test">
    <td>MF216N/A</td>
    <td>Apple</td>
    <td class="outofstock">0</td>
    <td>1&nbsp;054,24SEK</td>
    <td>
      <input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
    </td>
  </tr>
</table>

小提琴演示

用户可以使用父元素索引为每个子元素添加唯一ID

$("tr.keep").each(function (parentIndex) {
$(this).find('td').each(function (childIndex) {
    $(this).attr('id', parentIndex + '' + childIndex)
   })
});
相关文章：