jQuery -重命名和重命名(计数)元素

Question

我有一个表行的列表，而这些tr由于某种原因(例如腿-1，腿-2)有编号的类。已经可以在此上下文中删除具有相同给定类的tr。

删除之后，我需要重命名剩下的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。剩下的是：

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

因此，一旦我删除了leg-2，两个带有class=的tr“腿-3”都必须重新命名为class=“腿-2”，这样它就会再次出现如下情况：

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

怎么做呢？？

寻求任何帮助！

小提琴

http://jsfiddle.net/Lynkb22n/2/

Answer 1

我扩展了现有的remove leg按钮处理程序代码，在删除表的一个腿部分后为表行添加一个更新部分。我希望你能找到密码。小提琴

顺便说一句，这是我第一次在包含选择器中使用jQuery，所以我觉得这个问题很酷:-)

 $(document).on("click", "#segment-table .delete_this_leg", function () {
    var rows_to_delete = $(this).parent().parent().parent().attr('class').slice(-1);
    $("tr.leg-" + rows_to_delete).remove();
    var cntAbreiseSegments = $('.legX').length / 3;
    if (cntAbreiseSegments < "2") {
          $('#addSegment').show();
    }

    var  legNro = 0;

    //select all tr elements that which class attribute value
    //contains text: 'leg-'
    $('tr[class*="leg-"]').each(function () {

        $elem = $(this);        
        var elemClass = $elem.attr("class");

        //remove current classes
        $elem.removeClass();

         var legClasses = ""; 

        //element has class divider  
        if (elemClass.indexOf('divider') > -1 ) {
            legClasses = "divider ";
        } //element has class legX, and is not divider
        else if (elemClass.indexOf('legX') > -1 ) {

            legClasses = "legX ";

        } else {//the row with leg text visible

            var text = "leg-" + legNro;

            $elem.find("b").html(text);       
        }

        legClasses = legClasses + " leg-" + legNro; 

        //add updated classes
        $elem.addClass(legClasses);

        //add by one legNro if divider is found
        if (elemClass.indexOf('divider') > -1 ) {
             legNro += 1;
        }       

    });

});