javascript - attribute - title tag w3schools




Seletores de jQuery em atributos de dados personalizados usando HTML5 (3)

Gostaria de saber quais seletores estão disponíveis para esses atributos de dados que vêm com o HTML5.

Tomando este pedaço de HTML como um exemplo:

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

Existem seletores para obter:

  • Todos os elementos com data-company="Microsoft" abaixo de "Companies"
  • Todos os elementos com data-company!="Microsoft" abaixo de "Companies"
  • Em outros casos, é possível usar outros seletores como "contém, menor que, maior que, etc ...".

jQuery UI tem um seletor :data() que também pode ser usado. Tem sido em torno desde a versão 1.7.0 parece.

Você pode usá-lo assim:

Obter todos os elementos com um atributo data-company

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

Obter todos os elementos em que data-company é igual a Microsoft

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

Obtenha todos os elementos em que data-company não é igual a Microsoft

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

etc ...

Uma ressalva do novo :data() seletor é que você deve definir o valor dos data pelo código para que ele seja selecionado. Isso significa que para o acima funcionar, a definição dos data em HTML não é suficiente. Você deve primeiro fazer isso:

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

Isso é bom para aplicativos de página única em que você provavelmente usará $(...).data("datakey", "value") desta ou de outras maneiras semelhantes.


jsFiddle Demo

O jQuery fornece vários seletores (lista completa) para fazer com que as consultas que você está procurando funcionem. Para resolver sua pergunta "Em outros casos, é possível usar outros seletores como" contém, menor que, maior que, etc ... "." você também pode usar contém, começa com e termina com para ver esses atributos de dados html5. Veja a lista completa acima para ver todas as suas opções.

A consulta básica foi abordada acima, e usar a answer será a melhor aposta para obter todos os elementos da empresa de dados ou para obter todos, exceto a Microsoft (ou qualquer outra versão de :not ).

A fim de expandir isso para os outros pontos que você está procurando, podemos usar vários meta-seletores. Primeiro, se você for fazer várias consultas, é bom armazenar em cache a seleção pai.

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

Em seguida, podemos procurar empresas nesse conjunto que começam com G

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

Ou talvez empresas que contenham a palavra soft

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

Também é possível obter elementos cuja finalização do atributo data

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>


$("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"

Olhe para api.jquery.com/category/selectors : contains é um seletor

aqui está a informação no : contém selector







custom-data-attribute