0

I have two lists in Javascript:

  • newClass - which is a list of strings (class names)
  • hiddenVals - which is a list of hidden input elements from $('input:hidden') which contain values...

I basically want to be able to go through the list of newClass and check if there is a match in hiddenVals. If so, I will get the value of that hiddenVal.

I have the following working, but I can help but think JQuery has a more concise way of doing it:

            var newClass = ui.item[0].parentElement.classList;
            var hiddenVals = $j('input:hidden');
            var newStatusId = -1;

            for (var i = 0; i < hiddenVals.length; i++) {

                var hiddenClass = hiddenVals[i].classList[0];

                for (var x = 0; x < newClass.length; x++) {

                    var test = newClass[x];

                    if (test == hiddenClass) {
                        newStatusId = hiddenVals[i].value;
                    }
                }
            }

I hope that makes sense and someone can help refactor this appropriately.

CJH
  • 1,266
  • 2
  • 27
  • 61
  • So `.kanban-sortable` is a parent of `2-Development`? Could you show a bit more HTML? – barro32 Jun 07 '18 at 09:03
  • I have added a code snapshot of the generated HTML in use... I hope this can shine some light on what I am trying to do. – CJH Jun 07 '18 at 09:11

1 Answers1

0

Here are some suggested improvements.

// use const for constant variables
const classes = ui.item[0].parentElement.classList;
// and let for variables that may change
let newStatusId = -1;

// jQuery's .each() will loop through all elements selected
$('input:hidden').each(element => {
    // for of loop is nicer syntax
    for(let c of classes) {
        // you should use === instead of == to conserve type when comparing
        // but jQuery has .hasClass() which may help
        if($(element).hasClass(c)) {
            newStatusId = $(element).value;
        }
    }
});

Reference
const https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
let https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
for of loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
.each() https://api.jquery.com/each/
.hasClass() https://api.jquery.com/hasclass/
=== Which equals operator (== vs ===) should be used in JavaScript comparisons?

barro32
  • 2,559
  • 23
  • 36
  • Im not sure if I have stated my case very clearly. I am just getting it to work as I want (using some for statements) then will update my question to see if there is a more efficient way of getting the same result. – CJH Jun 07 '18 at 09:53
  • I have updated the question... hopefully this will make more sense now I have trimmed the rubbish out. – CJH Jun 07 '18 at 10:20
  • Looks like you got it. I'll update my answer with how I would write this (there are many ways!) – barro32 Jun 07 '18 at 11:09
  • Looks great and makes good sense... Thanks for that! I am just trying to implement but am not getting any matches on the .hasClass check. Just going to see if I can find out why. – CJH Jun 07 '18 at 11:54