javascript - data - jquery has attribute

Selectores de jQuery en atributos de datos personalizados utilizando HTML5

Question

Me gustaría saber qué selectores están disponibles para estos atributos de datos que vienen con HTML5.

Tomando este fragmento de HTML como ejemplo:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

¿Hay selectores para obtener:

• Todos los elementos con data-company="Microsoft" debajo de "Companies"
• Todos los elementos con data-company!="Microsoft" debajo de "Companies"
• En otros casos, es posible usar otros selectores como "contiene, menor que, mayor que, etc ...".

Answer 1

jQuery UI tiene un selector de :data() que también se puede usar. Ha existido desde la versión 1.7.0 que parece.

Puedes usarlo así:

Obtener todos los elementos con un atributo de la data-company

var companyElements = $("ul:data(group) li:data(company)");

Obtenga todos los elementos donde data-company es igual a Microsoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

Obtenga todos los elementos donde data-company no es igual a Microsoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

etc ...

Una advertencia del nuevo selector :data() es que debe establecer el valor de los data por código para que se seleccione. Esto significa que para que lo anterior funcione, definir los data en HTML no es suficiente. Primero debes hacer esto:

$("li").first().data("company", "Microsoft");

Esto está bien para las aplicaciones de una sola página en las que es probable que uses $(...).data("datakey", "value") de esta manera u otras similares.

Answer 2

jsFiddle Demo

jQuery proporciona varios selectores (lista completa) para que las consultas que busca funcionen. Para responder a su pregunta "En otros casos, es posible usar otros selectores como" contiene, menor que, mayor que, etc ... ". también puede usar el contenido de los contenidos de datos html5, contiene, comienza y termina con. Vea la lista completa arriba para ver todas sus opciones.

La consulta básica se ha cubierto anteriormente, y usar la answer será la mejor opción para obtener cada elemento de la empresa de datos o para obtener todos, excepto Microsoft (o cualquier otra versión de :not ).

Para expandir esto a los otros puntos que está buscando, podemos usar varios meta selectores. Primero, si va a hacer varias consultas, es bueno almacenar en caché la selección principal.

var group = $(''ul[data-group="Companies"]'');

A continuación, podemos buscar empresas en este conjunto que comiencen con G

var google = $(''[data-company^="G"]'',group);//google

O tal vez las empresas que contienen la palabra suave

var microsoft = $(''[data-company*="soft"]'',group);//microsoft

También es posible obtener elementos cuyo final de atributo de datos coincida.

var facebook = $(''[data-company$="book"]'',group);//facebook

//stored selector
var group = $(''ul[data-group="Companies"]'');

//data-company starts with G
var google = $(''[data-company^="G"]'',group).css(''color'',''green'');

//data-company contains soft
var microsoft = $(''[data-company*="soft"]'',group).css(''color'',''blue'');

//data-company ends with book
var facebook = $(''[data-company$="book"]'',group).css(''color'',''pink'');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company ="Facebook">Facebook</li>
</ul>

Answer 3

Solución JS pura / vainilla (ejemplo de trabajo here )

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group=''Companies''] [data-company=''Microsoft'']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group=''Companies''] :not([data-company=''Microsoft''])"); 

En querySelectorAll debe usar un selector de CSS válido (actualmente Level3 )

PRUEBA DE VELOCIDAD (2018.06.29) para jQuery y Pure JS: la prueba se realizó en MacOs High Sierra 10.13.3 en Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -poco). A continuación, la captura de pantalla muestra los resultados del navegador más rápido (Safari):

PureJS fue más rápido que jQuery aproximadamente un 12% en Chrome, un 21% en Firefox y un 25% en Safari. Curiosamente, la velocidad para Chrome fue de 18.9M por segundo, Firefox 26M, Safari 160.9M (!).

El ganador es PureJS y el navegador más rápido es Safari (¡más de 8 veces más rápido que Chrome!)

Aquí puede realizar una prueba en su máquina: https://jsperf.com/js-selectors-x

Answer 4

$("ul[data-group=''Companies''] li[data-company=''Microsoft'']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group=''Companies''] li:not([data-company=''Microsoft''])") //get all elements with data-company!="Microsoft" below "Companies"

Mire en api.jquery.com/category/selectors : contiene es un selector

Aquí hay información sobre el : contiene selector