CODEWITHSUNDEEP
javascriptjquery
Iamsamstimpson
Iamsamstimpson

Reputation: 1357

jQuery to Pure javaScript Questions

I am playing with JavaScript and have set myself the task of converting some jQuery I wrote last night to pure JavaScript. I've come across a few questions I was wondering if someone cold help me with.

I'm converting this in to pure JavaScript at the moment..

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

so far I have this: 

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

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

Upvotes: 0

Views: 141

Answers (3)

qiu-deqing
qiu-deqing

Reputation: 1333

insertAdjacentHTML() parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

if you are insert HTML string after an element i thingk insertAdjacentHTML is simple

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

Upvotes: 0

Petah
Petah

Reputation: 46050

Some but not all functions exist both in jQuery and pure JS.

after is not not one of them.

Here is a sample of how to do it without jQuery

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

(source: How to do insert After() in JavaScript without using a library?)

Converting your code to pure JS would be something like (note I don't really know why you would be inserting a div after a li, so I changed it to add a class): 

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/

Upvotes: 2

David Thomas
David Thomas

Reputation: 253338

is $(this) a jQuery object, and not used in pure JavaScript (is this.something the same)?

Yes, $(this) is a jQuery object, this allows the use of jQuery methods on whatever is currently represented by this (Wrapped in jQuery). This is not the same as this, nor is it used in plain JavaScript.

`this.something`

Is an attempt to access the something property, or attribute, of a plain DOM node, a property which you'd have to define yourself.

can you easily do something like .after() in pure JavaScript or is it just silly?

If it was 'just silly' the jQuery team probably wouldn't have bothered to implement it. It can, however, be (relatively) easily implemented as a method of an HTMLElement in plain JavaScript (or as a function, if you'd prefer).

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.

References:

Upvotes: 1

Related Questions