jQuery to Pure javaScript Questions

Question

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.

is $(this) a jQuery object, and not used in pure JavaScript (is this.something the same)?
can you easily do something like .after() in pure JavaScript or is it just silly?

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>" );
    }
}

Where is `totalThumbs` coming from? Is there an array or collection of some sort associated with it? — Flight Odyssey, Dec 04 '13 at 23:17
The `$` is the jquery object. In pure javascript there is no `$` (unless you define it). — jraede, Dec 04 '13 at 23:17
`$()` is jQuery. `this` gets context in `each` but you don't have that context in `for` loop — charlietfl, Dec 04 '13 at 23:17
Why don't you check out the jQuery source code and see how these constructs are implemented? jQuery *is* JavaScript after all... — Joe Holloway, Dec 04 '13 at 23:18
`this` is available though, but it has to reference something :) As you've written it there is no `this`available (not in normal js or jquery) — Mackan, Dec 04 '13 at 23:19

score 2 · Answer 1 · edited May 23 '17 at 12:28

2

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/

edited May 23 '17 at 12:28

Community

1
1

answered Dec 04 '13 at 23:18

Petah

45,477
28
157
213

For Reference: http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library – showdev Dec 04 '13 at 23:19
so the $(this) would be replaced with 'this' and passed through as the referenceNode in to the function and the newNode would be the html markup "
"? – Iamsamstimpson Dec 04 '13 at 23:24
@pixeltooth I added an example conversion to my answer. – Petah Dec 04 '13 at 23:25

score 1 · Accepted Answer · answered Dec 04 '13 at 23:24

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:

score 0 · Answer 3 · answered Dec 04 '13 at 23:29

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

jQuery to Pure javaScript Questions

3 Answers3