jQuery insertBefore() 和 parentNode 出现片状

Question

我目前有一组 div，它们位于 jQuery 嵌套可折叠集中，如果要玩弄它们需要一点时间才能使它们工作。我已经使这些工作正常，但现在想添加在单击我放置的向上箭头时按请求在页面上向上移动列出的元素的功能。我编写的 javascript 可以(某种程度上)移动 div，如下所示:

$(document).ready(function() {
    $('.upItem').click(function(event) {
            if($(this.parentNode.parentNode).index() === 0) {
                alert($(this.parentNode.parentNode).attr('name') + ' is currently at the top');
            } else {
                $(this.parentNode.parentNode).insertBefore(this.parentNode.parentNode.previousSibling);
                alert($(this.parentNode.parentNode).attr('name') + ' moved Up');
            }
        }
    );
});

父节点 block 是为了让正确的元素移动，它们看起来确实最终移动得很好。

我正在使用类似于以下内容的 PHP 生成的 HTML:

<div name="H4Order_1" class="h4Holder">
<h4 id="L2_item_29" class="collapsible collapse-open"><span></span>SuperBowl</h4>
<div class="container2" style="display: block;">
    <div name="H5Order_1" class="h5Holder">
        <span class="buttonHolder">
            <span class="upItem">▲</span>
        </span>
        <h5>Item 1</h5>
    </div>
    <div name="H5Order_2" class="h5Holder">
        <span class="buttonHolder">
            <span class="upItem">▲</span>
        </span>
        <h5>Item 2</h5>
    </div>
    <div name="H5Order_3" class="h5Holder">
        <span class="buttonHolder">
            <span class="upItem">▲</span>
        </span>
        <h5>Item 3</h5>
    </div>
    <div name="H5Order_4" class="h5Holder">
        <span class="buttonHolder">
            <span class="upItem">▲</span>
        </span>
        <h5>Item 4</h5>
    </div>
</div>

我遇到的问题是，当我单击带有 .upItem 类的元素时，脚本会触发，并且我可以在元素位于顶部以及“移动”时看到警报，但通常该元素实际上并没有移动。我会看到它已被移动的警报，但它没有按预期向上移动。在下一次点击它会移动。有时，在这里和那里点击一下后，所有元素都开始按预期移动，每次点击一次，但这只是在对多个元素进行大量点击之后才发生的。

有什么方法可以解决问题，找出为什么有时需要点击 2 次才能使元素实际移动？

此处的每个请求是 jfiddle:

http://jsfiddle.net/jwnqh/

Answer 1

您试图在 previousSibling 之前插入节点，而 previousElementSibling是你想要的。这是因为在两个父容器之间有一个文本节点。

当然，此特定属性相对较新，不适用于旧浏览器 (IE < 9)，除非您有解决方法。

这将是一种将元素向上移动兄弟链的更直接的方法:

$('.upItem').click(function(event) {
  //var $parent = $(this).closest('.h5Holder');
  var $parent = $(this).parent().parent();

  if ($parent.index() === 0) {
    alert($parent.attr('name') + ' is currently at the top');
  } else {
    $parent.prev().before($parent);
    alert($parent.attr('name') + ' moved Up');
  }
});

Demo

此处，.prev().before() 确保您在前一个元素而不是前一个节点之前插入。

它还缓存了 anchor 的父容器，使代码更容易理解。