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




data js (5)

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

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") в этом или подобном виде.


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

Посмотрите на api.jquery.com/category/selectors : содержит селектор

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


Чистое / ванильное решение 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


jsFiddle Demo

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

Основной запрос был рассмотрен выше, и использование будет лучшим либо получить каждый элемент данных, либо получить все, кроме 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>


Если у вас уже есть ссылка на группу переключателей, например:

var myRadio = $("input[name=myRadio]");

Используйте функцию filter() , а не find() . ( find() предназначен для определения элементов child / descendant, тогда как filter() ищет элементы верхнего уровня в вашем выборе.)

var checkedValue = myRadio.filter(":checked").val();

Примечания. Этот ответ первоначально исправлял другой ответ, который рекомендовал использовать find() , который, похоже, был изменен. find() все равно может быть полезен для ситуации, когда у вас уже есть ссылка на элемент контейнера, но не на переключатели, например:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();




javascript jquery jquery-selectors custom-data-attribute