Селекторы jQuery для атрибутов пользовательских данных с использованием HTML5

Я хотел бы знать, какие селектора доступны для этих атрибутов данных, которые поставляются с HTML5.

Взяв этот фрагмент HTML в качестве примера:

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

Есть ли селектор, чтобы получить:

  • Все элементы с data-company="Microsoft" ниже "Companies"
  • Все элементы с data-company!="Microsoft" ниже "Companies"
  • В других случаях можно использовать другие селектора типа "содержит, меньше, больше, и т.д.".

ОТВЕТЫ

Ответ 1

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

Посмотрите jQuery Selectors: содержит селектор

вот информация о : содержит селектор

Ответ 2

jQuery UI имеет :data() селектор, который также можно использовать. Это происходит с тех пор, как Version 1.7.0 кажется.

Вы можете использовать его следующим образом:

Получить все элементы с атрибутом data-company

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

Получить все элементы, где data-company равно Microsoft

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

Получить все элементы, где data-company не равно Microsoft

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

и т.д...

Одна оговорка нового селектора :data() заключается в том, что вы должны установить значение data по коду для его выбора. Это означает, что для выполнения вышеизложенного определения data в HTML недостаточно. Вы должны сначала сделать это:

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

Это отлично подходит для приложений с одной страницей, где вы, вероятно, будете использовать $(...).data("datakey", "value") в этом или подобном виде.

Ответ 3

jsFiddle Demo

jQuery предоставляет несколько селекторов (полный список), чтобы сделать запросы, которые вы ищете для работы. Чтобы ответить на ваш вопрос "В других случаях можно использовать другие селектора типа" содержит, меньше, больше, и т.д. "". вы также можете использовать contains, начинается с и заканчивается, чтобы посмотреть на эти атрибуты данных html5. См. Полный список выше, чтобы просмотреть все ваши варианты.

Основные запросы были рассмотрены выше, и использование John Hartsock будет лучшим либо получить каждый элемент данных компании, либо получить все, кроме Microsoft (или любой другой версии :not).

Чтобы развернуть это на другие точки, которые вы ищете, мы можем использовать несколько мета-селекторов. Во-первых, если вы собираетесь выполнять несколько запросов, полезно кэшировать родительский выбор.

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

Затем мы можем искать компании в этом наборе, которые начинаются с G

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

Или, возможно, компании, содержащие слово soft

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

Также возможно получить элементы, атрибут данных которых заканчивается

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>