Get element with attribute from list

Question

I got a list of multiple elements like you can find in the example snippet below and I'd like to get all elements with a specific attribute ("test"=true).

$(function() {
  let elements = $(".myClass") // This property can no be changed so all I got is a variable that includes the callback of multiple jQuery elements.
 
    
  // How to extract all elements with the "test"-attribute from the elements property without using a each function?  
  console.log(elements)
  $(elements).each(function() {
    console.log($(this).attr("test") === "true")
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="myClass">A</div>
<div class="myClass">B</div>
<div class="myClass" test=true>C</div>

Is there any method that extracts just elements with specific properties like an attribute named test? Any help would be really appreciated.

`test` is not a native attribute. You should make it a data attribute and use it accordingly. — Taplar, Jul 02 '18 at 18:44
Possible duplicate of [Select elements by attribute](https://stackoverflow.com/questions/1097522/select-elements-by-attribute) — chazsolo, Jul 02 '18 at 18:49
Why do you wrap a jQuery object in a new jQuery object? Also, `elements` is not a property, and it *can* be changed. Use `const` if you want to prevent change. — Bram Vanroy, Jul 02 '18 at 18:54
`$('.myClass[test]')` (or just `$('[test]')` if the class name isn't relevant) — Daniel Beck, Jul 02 '18 at 19:00
@Taplar Even if the dupe holds how to use the attribute selector, the asked question have a given result set, which those answer will not be useful for, so _undelete_ it. — Asons, Jul 02 '18 at 19:03
@BramVanroy I‘m pretty sure you‘ve mixed something up. Please read the question content another time. — , Jul 02 '18 at 20:34
@jonas00 Bram is correct that doing `$(elements)` is redundant, as elements is already a jQuery object. — Taplar, Jul 02 '18 at 21:06
This is not the question- @Taplar. He did not really understand my comments in the snippet. Because he is Talking about „... it can be changed “ while I‘ve tried to make you know it can not be changed in my case because I don‘t want it to be changed. I‘m pretty sure another look would fix this issue for him :) — , Jul 02 '18 at 21:23
The point of the redundancy is not as a stand alone answer to your question. It is a simple aside to point out something you are doing that is not necessary. I'm not saying anything else he said is accurate or not. I'm simply asserting the truth to the redundancy point. @jonas00 — Taplar, Jul 02 '18 at 21:24
As @Taplar points out, my point still stands. SO is for making you a better programmer and comments are here for providing input. I just pointed out the redundancy in your code. I did misinterpret what you meant with *can no be changed*, but that was due to your choice of words I think. As I said, it is not a property. Furthermore, it *can* be changed (unlike `const`s), you just can't (for reasons of your own). Seems like a stupid thing to argue about but when talking about what elements can and cannot do it is better to be clear about it. — Bram Vanroy, Jul 03 '18 at 06:43

score 4 · Accepted Answer · edited Jul 02 '18 at 19:05

4

You can filter off of the elements you found.

$(function() {
  let elements = $(".myClass")
  
  console.log( elements.filter('[test="true"]').get() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="myClass">A</div>
<div class="myClass">B</div>
<div class="myClass" test=true>C</div>

edited Jul 02 '18 at 19:05

Asons

84,923
12
110
165

answered Jul 02 '18 at 18:47

Taplar

24,788
4
22
35

JP. Aulet · Answer 2 · 2018-07-02T19:06:23.913

0

You should use the data attr (valid HTML) and then select it with jQuery like you are doing, something like:

<div data-test='true' class='element1'></div>
<div class='element2'></div>

$(elements).each(function() {
  console.log($(this).data("test") === "true"));
})

Edit: As points LGSon .without using a each function

// How to extract all elements with the "test"-attribute from the elements property without using a each function?

In this case:

Edit 2 (my mistake): allTestElements = $(elements).find([data-test='true']); //this way you search in elements var instead in all DOM again

And then you have all the elements in the var...

Hope it helps!

edited Jul 02 '18 at 19:06

answered Jul 02 '18 at 18:47

JP. Aulet

4,375
4
26
39

OP wrote _"...without using a each function"_ – Asons Jul 02 '18 at 18:54
1

Again, OP asks how to get them from a given list, in this case the variable `elements`, with your sample you create them all over again – Asons Jul 02 '18 at 19:02

Get element with attribute from list

2 Answers2