Question

以下是示例http://codepen.io/g1un/pen/zKEBjg

function wrapme(){
  var box = $('.box');
  var top = box.scrollTop();
    $(document.body).wrapInner($("<div>", { class: "wrapper" }));
  box.scrollTop(top);
}

我对jquery如何正确执行此函数感兴趣，因为我保存了变量somethng，其父级为body，并且当scrollTop(top)函数运行时，它实际应用于另一个DOM元素父母wrapper 我找不到jQuery如何注意到这种变化的解释。

Answer 1

不完全是。

.box元素总是在dom中。 wrapInner函数无法从dom中删除此元素，因此当您将该元素保存在变量.box中时 - 即使在调用wrapInner之后，您仍然拥有确切的元素

关于top - 再次，保存该值，然后将其应用（返回相关元素）。

检查此示例：

＆＃13;

$('.box').scrollTop(1000);

function wrapme(){
  var box = $('.box');
  var top = box.scrollTop();
  console.log("Top: " + top);
  $(document.body).wrapInner($("<div>", { class: "wrapper" }));
  box.scrollTop(top);
  console.log("Scroll element to "+top+" from top");
}

＆＃13;

.box {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 1px solid #000;
}

.wrapper {
    border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
</div>
<button onclick="wrapme()">wrap me!</button>

＆＃13;

更新

wrapInner没有＆＃34;删除＆＃34;元素，它只会在dom树内移动它们。当您将引用（jquery或vanilla javascript ref）保存到dom-tree中的某个节点时，即使该元素在dom树中移动 - 您仍然可以引用相关节点。请注意，即使您从dom树中删除节点 - 如果您仍然引用该节点，则可以将其添加回dom树并操作该节点。

此示例演示了在树内移动/移除元素，同时保持对它们的引用：

＆＃13;

$('#btn1').click(function() {
  // remove the #el1 node from the DOM tree, but keep reference to that note
  el1 = $('#cont1 #el1').remove();
  if (el1.length) {
    // append the #el1 node to the #cont2 using the reference
    $('#cont2').append(el1);
    
    // add border to that node, using the reference
    el1.css('border', '1px solid black');
  }
});

$('#btn2').click(function() {
  // save reference to the #el2 node
  el2 = $('#cont1 #el2');
  if (el2.length) {
    // append the #el1 node to the #cont2 using the reference
    $('#cont2').append(el2);
    
    // add border to that node, using the reference
    el2.css('border', '1px solid black');
  }
});

＆＃13;

div {
  margin: 5px;
  padding: 5px;
}
#cont1 {
  border: 1px solid red;
}
#cont2 {
  border: 1px solid blue;
}
#cont1 #el1, #cont1 #el2 {
  border: 1px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cont1">cont1
  <div id="el1">el1</div>
  <div id="el2">el2</div>
</div>
<div id="cont2">cont2
</div>

<button id="btn1">Click to move - using remove()</button>
<button id="btn2">Click to move - using append()</button>

＆＃13;

append函数使用appendChild方法。＆＃34;如果给定的子节点是对文档中现有节点的引用，则appendChild（）将其从当前位置移动到新位置（在将节点附加到某个节点之前，不需要从其父节点中删除该节点其他节点）。＆＃34; [1]

jQuery移动后如何识别元素？

1 个答案:

更新