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



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

Question

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



Related