获取元素突变发生的索引位置

Question

我的问题是关于 DOM 突变。多年前，网络开发人员能够处理对 DOM 所做的更改（称为 DOM 突变）。

我使用这个函数来检查一个元素是否已经从 DOM 中移除。在从 DOM:

中删除之前，我还能够获取元素的索引位置 index()

function NodeRemovedEventTrigger() {
jQuery( "body" ).bind(
    "DOMNodeRemoved",
    function( objEvent ){
        // Append event to log display.
        var elem = $(objEvent.target);
        if(elem.hasClass('feed-container')) {
            var i = elem.index();
            console.log(i);//get index position of the element
        }
    }
);

}

由于 DOMNodeRemoved 已弃用且在某些浏览器中不受支持，如何使用 MutationObserver( ) 方法。我的重点是获得 索引位置

我试过的方法似乎对我不起作用：

// select the target node
var target =document.getElementById('post-line');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {

    if (mutation.removedNodes) {
        //if the element removed has class='post-container' , then get the index position
        var elem    =   mutation.removedNodes;
        console.log(elem.index());//get index position
    }
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true,removedNodes:NodeList[0]};

// pass in the target node, as well as the observer options
observer.observe(target, config);

HTML:

<div id="post-line">

<div class="post-container">
    <div><span></span></div>
</div>

<div class="post-container">
    <div><span></span></div>
</div>

<div class="post-container">
    <div><span></span></div>
</div>
</div>

谢谢。

Answer 1

我认为您可以使用 mutation.previousElement 来获取删除元素之前的元素的索引。然后只需添加 1 即可删除元素索引：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.removedNodes) {
      var elem = mutation.removedNodes;
      var prevElement = $(mutation.previousSibling.previousElementSibling);
      var removedIndex = prevElement.index() + 1;
      console.dir(removedIndex);
    }
  });
});

获取元素突变发生的索引位置

Get Index position of element mutation happened on

javascript

mutation