Mi pregunta es bastante simple, pero no pude encontrar una respuesta existente:
Quiero seleccionar un subconjunto de elementos si uno de sus dos posibles atributos de datos es "X".
Mi selector se ve actualmente así:
$('.line').data('identifier1', 'X'); Me gustaría agregar al mismo selector .data('identifier2', 'X') usando una declaración OR, si eso es posible con jQuery.
Entonces, el resultado debería ser que todos los elementos .line se elijan si tienen el valor 'X' en su data-identifier1 o data-identifier2.
Aquí hay un fragmento al que solo le falta la instrucción OR:
let myCollection = $('.line').data('indentifier1', "X"); console.log(myCollection); //myCollection should get divs 1,3,4 but not 2 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="line" data-identifier1="X" data-identifier2="Y">1</div> <div class="line" data-identifier1="Y" data-identifier2="Y">2</div> <div class="line" data-identifier1="Y" data-identifier2="X">3</div> <div class="line" data-identifier1="X" data-identifier2="X">4</div>Puede usar each() y una matriz para almacenar cada div dentro
let DivsLine = $('.line'); let myCollection = new Array(); $(DivsLine).each(function(index, value){ let identifier1 = $(this).data('identifier1'); let identifier2 = $(this).data('identifier2'); if (identifier1 == 'X' || identifier2 == 'X') { myCollection.push($(this).text()); } }); console.log(myCollection); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="line" data-identifier1="X" data-identifier2="Y">1</div> <div class="line" data-identifier1="Y" data-identifier2="Y">2</div> <div class="line" data-identifier1="Y" data-identifier2="X">3</div> <div class="line" data-identifier1="X" data-identifier2="X">4</div>Puede consultar atributos data como este y usar , como un or .
let myCollection = $('.line[data-identifier1="X"],.line[data-identifier2="X"]'); console.log(myCollection); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="line" data-identifier1="X" data-identifier2="Y">1</div> <div class="line" data-identifier1="Y" data-identifier2="Y">2</div> <div class="line" data-identifier1="Y" data-identifier2="X">3</div> <div class="line" data-identifier1="X" data-identifier2="X">4</div>