if(document.readyState === 'plete') {
    function $(elements) {
        var matches = document.querySelectorAll(elements);
        for (var i = 0; i < matches.length; i++) {
             var item = matches[i];   
        }
        return item;
    }
}

$('div.test').style.fontSize = '36px';

<div class="test">asdf</div>
<div class="asdfd">test</div>
<div class="test">test</div>

if(document.readyState === 'plete') {
    function $(elements) {
        var matches = document.querySelectorAll(elements);
        for (var i = 0; i < matches.length; i++) {
             var item = matches[i];   
        }
        return item;
    }
}

$('div.test').style.fontSize = '36px';

<div class="test">asdf</div>
<div class="asdfd">test</div>
<div class="test">test</div>

I'd like to select all elements using querySelectorAll, but this seems to only affect the last element.

• javascript

Share Improve this question Follow edited Nov 25, 2014 at 23:08 Cjmarkham 9,69066 gold badges5252 silver badges8585 bronze badges asked Nov 25, 2014 at 22:59 O PO P 2,3651111 gold badges4242 silver badges7575 bronze badges 9

• You're taking a very strange route to converting a NodeList into something else in order to fail anyway (assuming you meant to return something other than a single node, which is the only way that style.fontSize is ever going to work). – David Thomas Commented Nov 25, 2014 at 23:05
• How can I apply the style change outside of the loop and utilize my function? – O P Commented Nov 25, 2014 at 23:08
• To whoever has downvoted every answer apart from @CarlMarkham's without leaving a corresponding ment, I and many others consider it rather impolite. – Nathan Commented Nov 25, 2014 at 23:23
• Just to be clear, it wasn't me. – Cjmarkham Commented Nov 25, 2014 at 23:25
• Incidentally, since your question seems to be more about "how can I replicate jQuery's selector and chaining syntax," there's a very good article here: blog.buymeasoda./creating-a-jquery-like-chaining-api – David Thomas Commented Nov 25, 2014 at 23:27

 |  Show 4 more ments

7 Answers 7

Sorted by: Reset to default 3

You are assigning the variable within the loop which will only return the last one. You should build an array of matches by declaring the variable outside of the loop or return the matches:

function $(elements) {
  return document.querySelectorAll(elements);
}

Or:

function $(elements) {
  var matches = document.querySelectorAll(elements);
  var items = [];
  for (var i = 0; i < matches.length; i++) {
    items.push(matches[i]);   
  }
  return items;
}

You assign each item to var item in turn.

After you've assigned the last one, you return the current value of item (which is the last one).

Return matches and then loop over it to set the font size of each item in turn.

Let's take a look at what your $ function is doing.

1. Select all items which match the query
2. Assign the first item in the list to item...
3. Assign the nth item to item
4. Return item which now contains the last element

So $() returns only the last element, and on that object, you are doing the assignment .style.fontSize = '36px'

There is no simple way to implement $ to do exactly what you are trying to. You could try a function which is called like this:

$(selector, {
    fontSize : "36px"
});

It would look something like this:

function $(selector, properties) {
    var matches = document.querySelectorAll(selector);
    for (var i = 0; i < matches.length; i++) {
        for (var j in properties) {
            matches[i].style[j] = properties[j];
        }
    }
}

I'd remend you fully understand what this is doing before moving on.

Also, the way you have used document.readyState makes it redundant. You should enclose the function call in your document.readyState, not the definition.

The variable item not is a array, then it is being overrided on each iteration loop. Or define a array in order by save all selectors, or add the return in for loop.

Of course! the variable item holds the current iteration match. After the for cycle pletes, it will naturally hold the last matched element. Javascript is executed sequentially, meaning the return statement will be executed after the forcycle.

I see you are trying to use chaining. This won't work with your current structure as your selector function will only ever return the last matched element from your querySlectorAll.

I think in this case it would be better to either pass a function that you want to do to each element or return an array/nodelist for another function to use;

function $(elements, method) {
    var matches = document.querySelectorAll(elements);
    for (var i = 0; i < matches.length; i++) {
         method(matches[i]);   
    }
}

$('div.test', function (elem) {elem.style.fontSize = '36px';});

if(document.readyState === 'plete') {
    function $(elements) {
        var matches = document.querySelectorAll(elements);
        for (var i = 0; i < matches.length; i++) {
             var item = matches[i];   
        }
        return item;
    }
}

$('div.test').style.fontSize = '36px';

<div class="test">asdf</div>
<div class="asdfd">test</div>
<div class="test">test</div>