javascript - jQuery:如何重新计数和重命名元素

Question

我有一个表格行列表，这些 tr 出于某种原因(leg-1、leg-2 等)有编号的类别。已经可以从此上下文中删除单个 tr。

删除一个 tr 后，我需要重命名剩余的 tr。

例子:我有

<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>

现在我删除 leg-2。剩下的是:

<tr class="leg-1"></tr>
<tr class="leg-3"></tr>

现在我想重命名剩余的 tr，使其回到 leg-1 和 leg-2。

这怎么能做到？？

感谢您的帮助!

---

编辑:我忘了提到它可以有多个 tr 类为“leg-1”、“leg-2”……所以正确的开始示例是

<tr class="leg-1"></tr>
<tr class="leg-1"></tr>
<tr class="leg-2"></tr>
<tr class="leg-3"></tr>
<tr class="leg-3"></tr>

现在，当我删除 leg-2 时，两个带有 class="leg-3"的 tr 都必须重命名为 class="leg-2"。 ..

抱歉我之前没有提到这个!

实际操作 http://jsfiddle.net/Lynkb22n/2/

Answer 1

我最直接的建议是:

$('tr').each(function(i) {
  // looking for a class-name that starts with (follows a
  // word-boundary: \b) leg- followed by one or more numbers (\d+)
  // followed by another word-boundary:
  var matchedClass = this.className.match(/\bleg-\d+\b/);
  // if a match exists:
  if (matchedClass) {
    // set the node's className to the same className after replacing
    // the found leg-X class name with the string of 'leg-' plus the
    // index of the current element in the collection plus one:
    this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
  }
});

$('tr').each(function(i) {
  var matchedClass = this.className.match(/\bleg-\d+\b/);
  // if a match exists:
  if (matchedClass) {
    this.className = this.className.replace(matchedClass[0], 'leg-' + (i + 1));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="leg-2323523">
      <td>1</td>
    </tr>
    <tr class="leg-2323523">
      <td>2</td>
    </tr>
    <tr class="leg-2323523">
      <td>3</td>
    </tr>
    <tr class="leg-2323523">
      <td>4</td>
    </tr>
  </tbody>
</table>

使用 id 更容易一些，因为我们不需要像处理类那样保留预先存在的并发 id:

// selects all <tr> elements, sets their `id` property
// using the anonymous function available within prop():
$('tr').prop('id', function (i) {
  // i: the index amongst the collection of <tr> elements:
  return 'leg-' + (i+1);
});

$('tr').prop('id', function (i) {
  return 'leg-' + (i+1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
  </tbody>
</table>

如果索引/行号只是为了让 JavaScript 可用，那么您可以轻松地使用对所有 HTMLTableRowElement 可用的 native rowIndex 属性:

// selects <tr> elements, binds the 'mouseenter' event-handler:
$('tr').on('mouseenter', function() {
  // logs the HTMLTableRowElement rowIndex property
  // to the console:
  console.log(this.rowIndex);
});

$('tr').on('mouseenter', function() {
  console.log(this.rowIndex);
});

td {
  border: 1px solid #000;
  width: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
  </tbody>
</table>

引用资料:

• JavaScript:
  • > HTMLTableRowElement .
  • > JavaScript Regular Expression Guide .
  • > String.prototype.match() .
  • > String.prototype.replace() .
• jQuery:
  • > each() .
  • > prop() .