Properly storing element information?

Question

JavaScript

There is a task to select elements without a specific class ( classX), assign them this class ( classX), and remember to whom we assigned it, so that we can remove it later.

Something like:

<span class="class">Элемент 0</span><br>
<span class="class classX">Элемент 1</span>

As you can see from the example classX, some of the elements in the selection may already have, for which I need to somehow “mark” the element that initially did not have classX.

Now I solve this by assigning an additional class:

<span class="class classX classZ">Элемент 0</span><br>
<span class="class classX">Элемент 1</span>

And when I need to return everything as it was, I already operate on the element with classZ.

How to solve this problem correctly? Is it correct to store this value in an attribute

<a href="http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes">data-*</a>

, For example?

Answer 1

I take it you are using jQuery? And what prevents you after, before assigning a class, to save the nodes into some global variable, with the help of which you first set the class in the future, and then, when necessary, remove it?

Answer 2

How about holding a variable with a cache? selected a bunch of elements, wrote them into a variable, chose another one, wrote the same one, you need to change it back, take the previous selection and change

Answer 3

In order not to keep the variable with the cache, you can use the marker class, which does not change anything in the style, but clearly defines that these elements are freshly marked. Moreover, if there are many such notes to be made, then the marker can be numbered.

$('.class').not('.classX').addClass('classX').addClass('marker01');
// далее такие элементы легко выбрать так
$('.marker01').removeClass('classX').removeClass('marker01');

Something like that. All the same can be easily done without jQuery, but it will turn out a little more cumbersome.