Я хотел бы знать, какие селектора доступны для этих атрибутов данных, которые поставляются с 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"
$("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: содержит селектор
вот информация о : содержит селектор
$('div[data-col="1"][data-row="2"]')
Выберет ли div, где data-col равно 1, а data-row = 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")
в этом или подобном виде.
:data()
или метод .data()
?
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>