prepend

prepend

关注
发信
关注(28)粉丝(399)

javascript - 如何强制.prepend()和.append()添加DOM对象，而不是文本

在某些情况下，jQuery .prepend()和.append()插入文本而不是DOM对象。
要重现，请运行代码段，然后按详细说明栏中的Add group链接。
插入的html显示为文本。

取而代之的是，应该出现bootsrtap面板。

看起来jQuery前置和附加不会添加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>

最佳答案

.get返回HTMLElement。这就是为什么它的附加字符串。

如果希望选择第一个元素，则应使用:first选择器。

$parentpanel = $this.parents(".designer-panel:first");





$(function() {

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

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

    $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>





它改用ParentNode.prepend。 Reference

关于javascript - 如何强制.prepend()和.append()添加DOM对象，而不是文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40326711/

10-09 16:51
Powered by LMLPHP ©2024 prepend 0.032848