0

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>" );
    }
}
Improve this question
5
  • 1
    Where is totalThumbs coming from? Is there an array or collection of some sort associated with it? Commented Dec 4, 2013 at 23:17
  • 1
    The $ is the jquery object. In pure javascript there is no $ (unless you define it). Commented Dec 4, 2013 at 23:17
  • $() is jQuery. this gets context in each but you don't have that context in for loop Commented Dec 4, 2013 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... Commented Dec 4, 2013 at 23:18
  • this is available though, but it has to reference something :) As you've written it there is no thisavailable (not in normal js or jquery) Commented Dec 4, 2013 at 23:19

3 Answers 3

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

For Reference: stackoverflow.com/questions/4793604/…
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 "<div class='rowBreak'></div>"?
@pixeltooth I added an example conversion to my answer.
1

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:

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.