Necesita la posibilidad de obtener la coincidencia exacta de una cadena de búsqueda en un controlador on.click . Esto es lo que tengo ahora,
$("#wrapper").on("click", "label:contains('SEARCH') ~ .material > .icon", function (e) {El problema es que "contiene" coincide con todas las palabras con Etiqueta que contiene "BUSCAR".
Por ejemplo, "Buscar", "Buscar", "Buscar oración", etc.
¿¿Algunas ideas?? Han pasado mucho tiempo, para encontrar una solución. Por ejemplo, mezclar :contains(''):not(:contains). Pero sin éxito.
<div class="wrapper"> <div class="field dco-uncommon has-required required dco-enabled" id="bss_options_5283" depend-id="20652" style="display: block;"> <label class="label" for="select_5283"><span>SEARCH</span></label> <div class="control "> <select name="options[5283]" id="select_5283" class="product-custom-option admin__control-select required" data-selector="options[5283]" aria-required="true"> <option value="">-- Please choose --</option> <option value="75108" price="0" depend-id="20659">Option 1</option> <option value="75111" price="35" depend-id="20662">Option 2</option> </select> </div> <div class="material"> <span class="icon" style="background-image: url(amethyst_1646165.jpg)" data-title="Amethyst 1646165" title="Amethyst 1646165"></span> <span class="icon" style="background-image: url(apfel_1644435.jpg)" data-title="Apfel 1644435" title="Apfel 1644435"></span> <span class="icon" style="background-image: url(auster_1644480.jpg)" data-title="Auster 1644480" title="Auster 1644480"></span> <span class="icon" style="background-image: url(azure_1641085.jpg)" data-title="Azure 1641085" title="Azure 1641085"></span> <span class="icon" style="background-image: url(baltic_1645155.jpg)" data-title="Baltic 1645155" data-properties="" title="Baltic 1645155"></span> </div> </div> </div>La lógica que está buscando no es compatible con jQuery, por lo que pude obtener esta biblioteca que amplía jQuery y le brinda exactamente lo que está buscando:
https://blog.mastykarz.nl/jquery-regex-filter/
Esta biblioteca le permite usar expresiones regulares para filtrar valores en sus elementos:
Entonces aquí estamos usando la expresión regular de javascript normal para que coincida con la palabra exacta: ^BUSCAR$
// extend jquery jQuery.extend( jQuery.expr[':'], { regex: function(a, i, m, r) { var r = new RegExp(m[3], 'i'); return r.test(jQuery(a).text()); } } ); // extend jquery $(function() { $("#wrapper").on("click", `label:regex('^SEARCH$')`, function (e) { console.log('This label contains the exact string "SEARCH"') }) }); #wrapper { height: auto; width: 200px; background-color: #DDDDDD; padding: 2px; } label { display: block; background-color: white; padding: 3px; margin: 2px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <label for="">SEARCH</label> <label for="">SEARCHstring</label> <label for="">stringSEARCHother</label> <label for="">stringsearchother</label> <label for="">SEARCH</label> </div>