Имя атрибута jQuery содержит

Я пытаюсь настроить имена атрибутов, которые содержат определенное слово, а не то, как вы думаете.

Допустим, у меня есть:

<div data-foo-bar="hello"></div>

Как настроить таргетинг на элементы с 'data-foo' в имени атрибута?

Ответы

Ответ 1

Я не думаю, что вы можете таргетировать имена атрибутов так же, как целевые значения атрибутов. Однако вы можете использовать .filter() для этого несколько эффективно:

$('div').filter(function() {
  for (var property in $(this).data()) {
    if (property.indexOf('fooBar') == 0) {
      return true;
    }
  }

  return false;
});​

Обратите внимание, что data-foo-bar был преобразован в fooBar.

Демо: http://jsfiddle.net/Tyj49/3/

Ответ 2

Я не уверен, что вы можете это сделать. У меня был взгляд на API, и вы, похоже, только можете сделать более глубокое частичное сопоставление по значению, а не по имени самого атрибута.

Я собираюсь дать вам потенциально неприятный совет, "не делай этого".;-) По сути, то, что вам нужно, это куча div, которые соответствуют более общей категории. Не только data-foo-bar s, но ВСЕ data-foo s! Почему бы просто не дать всем data-foos имя класса, которое вы можете выбрать, или отдельный атрибут типа data-foo="true"?

Иными словами, вместо того, чтобы строго придерживаться заданного вопроса, мне было бы интересно узнать, что такое вариант использования, так что, возможно, боковое движение в мышлении может решить вашу проблему так же эффективно. Многие способы скинуть кошку и все такое.

Ответ 3

Это просто альтернативное решение. Если вы можете убедиться, что имя атрибута, которое вы ищете, отсутствует в тексте элемента, то вы можете получить значение outerHtml элемента, а затем выполнить поиск подстроки:

$("elementsToCheck").each(function () {
    var elemHtml = $('<div>').append($(this).clone()).html(); //clone to get the outerHTML
    if (elemHtml.indexOf("attributeName") >= 0) {
        // current element contains the attribute with name "attributeName"
    }
});

Надеюсь, что это поможет.

Ответ 4

Попробуйте это

$().ready(function() {  
  var test=$('#div_test').data("foo-bar");
  alert(test);
});

HTML:

<div data-foo-bar="hello" id="div_test"></div>

Ответ 5

Используйте .data(), чтобы получить все атрибуты данных элемента, а затем используйте .filter, чтобы получить элементы с атрибутами data-validation*.

var validated_elements = $("p").filter(function() {
    var found = false;
    $.each($(this).data(function(key) {
        if (key.match(/^data-validation/)) {
            found = true;
            return false;
        }
    }
    return found;
});

Ответ 6

Попробуйте что-то вроде этого

var element = $('div[data-foo-bar=hello]')​;