如何在面板前后添加面板

Question

报表设计器布局包含 Bootstrap 3 面板。 详细信息面板有Add group 按钮，应该在它之前和之后添加新面板。

这是在 onclick 事件处理程序中使用 jquery prepend 和 append 实现的：

        var $this = $(this),
            $parentpanel = $this.parents(".designer-panel").get(0);
        $parentpanel.prepend('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px">' +
'</div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"group expression"</span>' +
'</div></div></div>');

        $parentpanel.append('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px">' +
'</div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group footer {0}' +
'</div></div></div>');

    });

如果点击添加波段按钮 html 会出现而不是面板。

看起来 jquery preoend 和 append 没有添加 dom 对象，原因不明。

如何解决这个问题，以便新面板出现在详细信息面板之前和之后？

$(function() {

          var startpos,
          selected = $([]),
          offset = { top: 0, left: 0 };

      
    $('#designer-detail-addband').on('click', function () {
        var $this = $(this),
$parentpanel = $this.parents(".designer-panel").get(0);

        $parentpanel.prepend('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px">' +
'</div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"groupexpression"</span>' +
'</div></div></div>');

        $parentpanel.append('<div class="panel designer-panel">' +
'<div class="panel-body designer-panel-body" style="height:1px"></div>' +
'<div class="bg-warning">' +
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
'</i> Group footer {0}' +
'</div></div></div>');

    });

      
      
      
      
      
    $(".designer-panel-body").droppable({
        accept: ".designer-field"
     });

    $(".designer-field").draggable({
            start: function (event, ui) {
                var $this = $(this);
                if ($this.hasClass("ui-selected")) {
                    selected = $(".ui-selected").each(function () {
                        var el = $(this);
                        el.data("offset", el.offset());
                    });
                } else {
                    selected = $([]);
                    $(".designer-field").removeClass("ui-selected");
                }
                offset = $this.offset();
            },

            drag: function (event, ui) {
                // drag all selected elements simultaneously
                var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
                selected.not(this).each(function () {
                    var $this = $(this);
                    var elOffset = $this.data("offset");
                    $this.css({ top: elOffset.top + dt, left: elOffset.left + dl });
                });
            }
        });



        $(".panel-resizable").resizable({
          minWidth: "100%",
          maxWidth: "100%",
          minHeight: 1
        });
      });

.panel-resizable {
        min-height: 1px;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

    .designer-field  {
        border: 1px solid lightgray;
        white-space: pre;
        overflow: hidden;
      position: absolute;
    }

    .designer-panel-body {
        min-height: 1px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .panel-footer {
        padding: 0;
    }

    .designer-panel, .panel-body {
        margin: 0;
        padding: 0;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    </head>

    <body>
      <div class='panel designer-panel'>
        <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'>

          <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div>

    <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div>
        </div>
        
        <div class='panel-footer'>Group 1 Header</div>
      </div>
          
    <div class='panel designer-panel'>
      <div class='panel-body panel-resizable' style='height:1cm'>
    <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group </div>
        </div>
      <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a></div>
      </div>

      <div class='panel'>
        <div class='panel-body panel-resizable' style='height:1cm'>
          
    <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div></div>
        <div class='panel-footer panel-warning'>Group 1 Footer</div>
      </div>

Answer 1

我认为您的问题在这里：

$parentpanel = $this.parent(".designer-panel");

jQuery 父级仅在 DOM 上上一层，而查看您的 HTML 带有 .designer-panel 的第一个 div 距您的锚点上几层。如果您将其更改为下面的代码，那么您应该希望得到您想要的元素。

$parentpanel = $this.parents(".designer-panel").get(0);