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>

现在我删除腿-2。其余的是：

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

现在我想重命名剩余的 tr，以便它回到腿 1 和腿 2。

怎么能做到这一点？？

感谢任何帮助！

---

编辑：我忘了提到它可以有多个类"leg-1"、"leg-2"的 tr ......所以正确的起始示例是

<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的本机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 正则表达式指南。
  • String.prototype.match() .
  • String.prototype.replace() .
• j查询：
  • each() .
  • prop() .

Answer 2

更新

根据您在下面的评论和更新的问题，这里有一个更新的解决方案。

var removed = $(".leg-2"),
    siblings = removed.nextAll(), // affect only next siblings to removed element
    pos = ""; // store current number after "leg-"
removed.remove(); // remove element
siblings.each(function (k) {
    $(this).removeClass(function (i, key) {
        pos = key.split("-")[1]; // update number after "leg-"
        return (key.match(/bleg-S+/g) || []).join(' ');
    }).addClass("leg-" + (pos - 1)); // add "leg-" plus new position
});

看到它在这里工作。

<小时 />

您可以将 .removeClass() 与 .match() 一起使用以删除以 leg 开头的类，然后使用 .addClass() 添加类leg加上tr的索引。

看到它在这里工作。

$("tr").each(function (k) {
    k++;
    $(this).removeClass(function (i, key) {
        return (key.match(/bleg-S+/g) || []).join(' ');
    }).addClass("leg-" + k);
});

Answer 3

试试这个，它将重命名类：

$(document).ready(function(){
	   
$("#click").click(function(){
	reorder();
});
			
   });
function reorder(){
   $('#myTable > tbody  > tr').each(function(index) {
console.log($(this).attr('class','leg-'+(index+1)));//avaoid starting fron 0
   });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr class="leg-1"><td>a1</td></tr>
<tr class="leg-2"><td>a2</td></tr>
<tr class="leg-3"><td>a3</td></tr>
<tr class="leg-7"><td>a4</td></tr><!--after click on button class will become class="leg-4" -->
<tr class="leg-8"><td>a5</td></tr><!--after click on button class will become class="leg-5" -->
</table>
<button id="click">CliCk</button>