Question

我正在开发一个应用程序，其中包含一些具有 a1，a2，a3 等ID的DIV。通过按 next 和上一个按钮可以选择导航DIV，一次只能显示一个Div。强文还有两项操作：添加和删除。添加ID大于最后ID的ID，例如，如果上一个DIV ID为 a3 ，则添加 a4 。

真正的问题是删除当前的DIV。如果用户使用Div a2 并点击删除选项，则会使用jQuery的.remove()方法删除当前的Div

现在导航会中断，因为它是顺序的。它试图找到Div a2 但找不到。我认为应该重命名所有剩余DIV的ID。由于没有 a2 所以 a3 应该变为a2，依此类推。我怎样才能做到这一点？执行不同任务的代码如下：

function removeQuestion()
{
    $("#_a"+answerIndex).remove();
    if(answerIndex > 1)
    {
        if ($("#_a"+(++answerIndex)).length > 0)
        {
            $("#_a"+answerIndex).appendTo("#answerPanel");
        }
        else if($("#_a"+(--answerIndex)).length)
        {
            $("#_a"+answerIndex).appendTo("#answerPanel");
        }
        totalOptions--;
    }
}


function addQuestion()
{
    var newId = 0;
    totalOptions++;
    var d = 1;
    newId = totalOptions;
    var _elemnew = '_a'+newId;
    $("#_a"+d).clone().attr('id', '_a'+(newId) ).appendTo("#answers_cache");
    var h = '<input onclick="openNote()" id="_note'+newId+'" type="button" value=" xx" />';
    $("#"+_elemnew+" .explain").html(h)
    $("#"+_elemnew+" ._baab").attr("id","_baab"+newId);
    $("#"+_elemnew+" ._fx").attr("id","_fasal"+newId);
    $("#"+_elemnew+" .topic_x").attr("id","_t"+newId);
    $("#"+_elemnew+" .topic_x").attr("name","_t"+newId);
    $("#"+_elemnew+" .answerbox").attr("id","_ans"+newId);
    $("#"+_elemnew+" .block").attr("onclick","openFullScreen('_ans"+newId+"')");

    $('.tree').click( function() 
      {
        toggleTree();
      }
    );
      $('.popclose').click( function() 
      {
        unloadPopupBox();
      }
    );
}

function next()
{
    console.log("Next ->");
    if(answerIndex < totalOptions)
    {
        answerIndex++;
        console.log(answerIndex);
        setInitialAnswerPanel();
    }
}
function previous()
{
    console.log("Next <-");
    if(answerIndex > 1)
    {
        answerIndex--;
        console.log(answerIndex);
        setInitialAnswerPanel();
    }
}

复合DIV的Html如下：

<div class="answers" id="_a1" index="1">
                <input placeholder="dd" id="_t1" type="text" name="_t1" class="urduinput topic_masla" value="" />
                <img class="tree" onclick="" src="tree.png" border="0" />
                <label class="redlabel">
                   xx                 :
                </label>
                <label id="_baab1" class="baabfasal _baab">
                </label>
                <label  class="redlabel">
                    xx                     :
                </label>
                <label id="_fasal1" class="baabfasal _fasal">
                </label>
                <a title=" ddd" class="block" href="#" onclick="openFullScreen('_ans1')">
                    <img src="fullscreen.png" border="0" />
                </a>
                <textarea id="_ans1" class="answerbox" cols="40"   rows="15"></textarea>
                <span class="explain">
                    <input onclick="openNote()" id="_note1" type="button" value=" xx" />
                </span>
                <span style="float:left;padding-top:5%">
                    <a href="#" onclick="addQuestion()">plus</a> | <a onclick="removeQuestion()" href="#">minus</a>  
                </span>
            </div>

Answer 1

var originalSet = $('.answers');
var container = originalSet.up() ;
var byId = function(a, b){
    return $(a).attr('id') > $(b).attr('id') ? 1 : -1;
}
originalSet
    .order(byId)
    .each(function rearrangeIds(position){
          $(this).attr({
              'index': poition,
              'id': '_a'+position
          });
    }).appendTo(container)

Answer 2

为什么不保留当前打开的页面而不是索引，并使用prev()和next() jQuery树遍历方法搜索上一页和下一页？

Answer 3

选择包含问题的所有div元素，最好使用css类选择器，使用each方法，并为它们分配新的ID：

$('.questionDiv').each(function(index) { $(this).attr('id', 'a' + (index + 1)); })

这应该足够了。

Jquery：如何在删除单个Div后重新排序DIV？

3 个答案: