Question

我正在使用JavaScript并且已经为自己设置了将昨晚写的一些jQuery转换为纯JavaScript的任务。我遇到了一些问题，我想知道是否有人帮助我。

是$(this)一个jQuery对象，而不是在纯JavaScript中使用（this.something是一样的）？
您可以轻松地在纯JavaScript中执行类似.after()的操作，还是只是愚蠢？

我现在正在将其转换为纯JavaScript ..

$('.list li').each(function(i) {
    if( ( i + 1 ) % numRow == 0 )
    {
         $(this).after( "<div class='rowBreak'></div>" );
    }
});

到目前为止，我有这个：

var totalThumbs = $('.list li').length;

for ( var i = 0; i < totalThumbs; i++ ) {
    if( ( i + 1 ) % numRow == 0 )
    {
        $(this).after( "<div class='rowBreak'></div>" );
    }
}

Answer 1

jQuery和纯JS中都存在一些但并非所有函数。

after不是其中之一。

以下是如何在没有jQuery的情况下执行此操作的示例

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

（来源：How to do insert After() in JavaScript without using a library?）

将代码转换为纯JS会是这样的（注意我不知道你为什么要在div之后插入li，所以我改为添加一个类）：

var lists = document.getElementsByClassName('list');
for (var i = 0, l = lists.length; i < l; i++) {
    var items = lists[i].getElementsByTagName('li');
    for (var ii = 0, ll = items.length; ii < ll; ii++) {
        if ((ii + 1) % 2 == 0) {
            items[ii].classList.add('row-break');
        }
    }
}

http://jsfiddle.net/tB3v6/1/

Answer 2

是$(this)一个jQuery对象，而不是在纯JavaScript中使用（this.something是否相同）？

是的，$(this)是一个jQuery对象，这允许在this（包含在jQuery中）当前表示的任何内容上使用jQuery方法。这与this不同，也不用于纯JavaScript。

`this.something`

尝试访问普通DOM节点的something属性或属性，这是您必须自己定义的属性。

你可以轻松地在纯JavaScript中做.after()这样的事情，还是只是愚蠢？

如果它“只是愚蠢”，jQuery团队可能不会为实现它而烦恼。但是，它可以（相对）轻松地在纯JavaScript中作为HTMLElement的方法实现（或者作为一个函数，如果你愿意的话）。

HTMLElement.prototype.after = function(newNode){
    // 'this' refers to the DOM node to which this method is chained:
    this.parentNode.insertBefore(newNode, this.nextSibling);
}

var aNewNode = document.createElement('div'),
    nodeToActOn = document.getElementById('demo');
aNewNode.innerHTML = '<p>Some text in a paragraph of a newly-created node.</p>';

nodeToActOn.after(aNewNode);

JS Fiddle demo

参考文献：

Node.insertBefore()。
Node.nextSibling。

Answer 3

insertAdjacentHTML（）将指定的文本解析为HTML或XML，并将结果节点插入到指定位置的DOM树中。

如果你在一个元素之后插入HTML字符串，那么事情就是插入一个简单的

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML

jQuery到纯javaScript问题

3 个答案: