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





2 Answers

jQuery UI имеет :data() селектор :data() , который также можно использовать. Это было примерно с версии 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") в этом или подобном виде.

js attribute dataset

Я хотел бы знать, какие селектора доступны для этих атрибутов данных, которые поставляются с 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"
  • В других случаях можно использовать другие селекторы типа «содержит, меньше, больше, и т. Д.».



Чистое / ванильное решение JS (рабочий пример 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'])"); 

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

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):

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

Таким образом, победитель PureJS и самый быстрый браузер - Safari (более чем в 8 раз быстрее, чем Chrome!).

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




Related