it-swarm.com.ru

Селекторы 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"
  • В других случаях возможно использование других селекторов, таких как "содержит, меньше, больше, и т.д ...".
591
Jose3d
$("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 : содержит селектор

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

940
John Hartsock

jQuery UI имеет :data() селектор , который также может быть использован. Это было вокруг с Версия 1.7. кажется.

Вы можете использовать это так:

Получить все элементы с атрибутом 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") аналогичным образом.

65
rhughes

jsFiddle Demo

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

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

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

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

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

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

Или, возможно, компании, которые содержат Word 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>
34
Travis J

Решение Pure/Vanilla JS (рабочий пример здесь )

// 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'])"); 

В querySelectorAll вы должны использовать valid CSS-селектор (в настоящее время Level )

SPEED TEST (2018.06.29) для jQuery и Pure JS: тест проводился на MacOs High Sierra 10.13.3 для Chrome 67.0 .3396.99 (64-разрядная версия), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-разрядная версия). На скриншоте ниже показаны результаты для самого быстрого браузера (Safari):

enter image description here

PureJS был быстрее, чем jQuery, около 12% в Chrome, 21% в Firefox и 25% в Safari. Интересно, что скорость для Chrome составляла 18,9 млн. Операций в секунду, Firefox 26M, Safari 160,9M (!).

Таким образом, победителем становится PureJS , а самым быстрым браузером является Safari (более чем в 8 раз быстрее чем хром!)

Здесь вы можете выполнить тестирование на своем компьютере: https://jsperf.com/js-selectors-x

5
Kamil Kiełczewski