Question

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

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

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>

Answer 1

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

Fiddle Demo

Answer 2

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

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

给所有子元素类

2 个答案:

Fiddle Demo