I am finding the max number of an element based on data attributes, however I want to convert jquery code to native vanilla js. I have tried to replace $ selector with querySelector of vanillaJS, but it throws an error like this. Is there a way I can convert this to vanilla JS. This is the error it returns.

DOMException: Failed to execute 'querySelector' on 'Document': 'li:not(".expired")[data-arrange]' is not a valid selector

This is my code.

var max = Math.max.apply([], document.querySelector('li:not(".expired")[data-arrange]').map(function() {
            return $(this).data('arrange');
        }).get());

sample HTML

<ul>
  <li data-arrange="1" class="rec expired">bONIE</li>
  <li data-arrange-"4" class="rec">eDS</li>
  <li data-arrange="5" class="expired">bue</li>
  <li data-arrange="6" class="rec">mag</li>
</ul>

Thank you.

I am finding the max number of an element based on data attributes, however I want to convert jquery code to native vanilla js. I have tried to replace $ selector with querySelector of vanillaJS, but it throws an error like this. Is there a way I can convert this to vanilla JS. This is the error it returns.

DOMException: Failed to execute 'querySelector' on 'Document': 'li:not(".expired")[data-arrange]' is not a valid selector

This is my code.

var max = Math.max.apply([], document.querySelector('li:not(".expired")[data-arrange]').map(function() {
            return $(this).data('arrange');
        }).get());

sample HTML

<ul>
  <li data-arrange="1" class="rec expired">bONIE</li>
  <li data-arrange-"4" class="rec">eDS</li>
  <li data-arrange="5" class="expired">bue</li>
  <li data-arrange="6" class="rec">mag</li>
</ul>

Thank you.

• javascript
• jquery

• 2 You don't need to use double quotes in the .not selector. The correct selector is document.querySelector('li:not(.expired)[data-arrange]') – dloeda Commented Mar 5, 2018 at 11:40
• Wait, did this selector work in jQuery? – Bergi Commented Mar 5, 2018 at 11:43
• @dloeda it probably ought to be querySelectorAll too – Andrew Bone Commented Mar 5, 2018 at 11:43
• 1 @AndrewBone I think so... But this returns a NodeList so .map will break – dloeda Commented Mar 5, 2018 at 11:45
• 1 Can you provide the original jquery that you're trying to convert? The code provided is not valid (so appears to be work-in-progress, which is fine). – fdomn-m Commented Mar 5, 2018 at 11:52

2 Answers 2

There are multiple issues this code:

1. You cannot use " inside .not the selector
2. As @AndrewBone said, probably you want to use querySelectorAll
3. querySelectorAll returns a NodeList[] so .map will break the execution.

So I guess the correct code must be:

var selector = 'li:not(.expired)[data-arrange]';
    var array = Array.prototype.slice.call(document.querySelectorAll(selector));
    var max = Math.max.apply(null, array.map(function(item) {
                return parseInt(item.dataset.arrange);
            }));

    console.info(max)

<ul>
  <li data-arrange="1">1</li>
  <li data-arrange="4">4</li>
  <li data-arrange="5">5</li>
  <li data-arrange="6">6</li>
</ul>

I have solved it using dloeda's code. I've just modified it a liitle bit, because it returns an error using .get();

var selector = 'li:not(.expired)[data-arrange]';
var array = Array.prototype.slice.call(document.querySelectorAll(selector));
var max = Math.max.apply(Math, array.map(function(item) {
        return item.dataset.arrange;
 }));