2014-10-30 3 views
9

Я хочу, чтобы выбрать значение атрибута, указав имя атрибута (начинается только с) Например, если мы имеем HTML тегJQuery - Как выбрать значение по имени атрибута начинается с

<div class = "slide" data-confirmID = "46" confirmID = "54"/> 

Я хочу, чтобы выбрать значение от атрибута начинается с data-

Заранее за помощь.

+0

Что делать, если у вас есть несколько атрибутов, начинающихся с 'data-'? Какую ценность вы должны получить? –

+0

jQuery имеет начало с селектором: http://api.jquery.com/attribute-starts-with-selector/ – Moob

+0

В моем сценарии у меня есть только один ... поэтому, если бы я мог выбрать имя атрибута, начиная с «data-», что должно сделать – user3111581

ответ

19

Если вы хотите, чтобы все данных- * атрибуты, вы можете перебирать объект данных JQ:

$('.slide').each(function(){ 
    for(data in $(this).data()) 
     console.log(data); // returns confirmID so element as an attribute `data-confirmID` 
}); 

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

EDIT

Чтобы получить все виды атрибута "начинается с", вы можете настроить свой собственный селектор JQuery:

jQuery.extend(jQuery.expr[':'], { 
 
    attrStartsWith: function (el, _, b) { 
 
     for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) { 
 
      if(atts[i].nodeName.toLowerCase().indexOf(b[3].toLowerCase()) === 0) { 
 
       return true; 
 
      } 
 
     } 
 
     
 
     return false; 
 
    } 
 
}); 
 

 
//e.g: 
 
$('.slide:attrStartsWith("data-")').css('color', 'red'); 
 
$('.slide:attrStartsWith("conf")').css('color', 'blue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slide" data-confirmID="46" data-testID="666">1</div> 
 
<div class="slide" confirmID="54" >2</div>

Если на противоположной стороне, вы хотите для проверки концов атрибутов со специальной строкой, вы можете использовать:

jQuery.extend(jQuery.expr[':'], { 
 
    attrEndsWith: function (el, _, b) { 
 
     for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) { 
 
      var att = atts[i].nodeName.toLowerCase(), 
 
       str = b[3].toLowerCase(); 
 
      if(att.length >= str.length && att.substr(att.length - str.length) === str) { 
 
       return true; 
 
      } 
 
     } 
 
     
 
     return false; 
 
    } 
 
}); 
 

 
$('.slide:attrEndsWith("testID")').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slide" data-confirmID="46" data-testID="666">1</div> 
 
<div class="slide" confirmID="54" >2</div>

+0

Спасибо @ A.Wolff это помогает! – user3111581

+0

@ A.Wolff Не можем ли мы получить доступ к другим атрибутам, которые не начинаются с «данных»? –

+1

@NishanSenevirathna Конечно, вам нужно сначала получить все атрибуты, а затем применить свою логику, например, чтобы получить атрибуты: http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element- с-javascript-jquery –

0

Атрибуты являются свойствами элемента, поэтому вы можете использовать for-in петлю

for (var prop in element) { 
    if (prop.indexOf('data-') == 0) { 
     var val = element[prop]; 
     break; 
    } 
} 
2

Вы можете сделать это как плагин JQuery. Я не уверен, его правильный путь идти об этом, но вот пример:

(function($) { 
 
    $.fn.attrBegins = function(s) { 
 
     var matched = ""; 
 
     this.each(function(index) { 
 
      $.each(this.attributes, function(index, attr) { 
 
       if(attr.name.indexOf(s)===0){ 
 
        matched = attr.value 
 
       } 
 
      }); 
 
     }); 
 
     return matched; 
 
    }; 
 
})(jQuery); 
 

 
//example use 
 
var val = $('div').attrBegins('data-'); 
 
alert(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slide" data-confirmID="46" confirmID="54" />

1

@Moob aproximation к JQuery attrBegins плагин возвращает имя атрибута (строку), когда совпадают ... одного элемента (игнорируя несколько совпадений). Я добавил код, чтобы вернуть JQuery Collection с соответствующими элементами.

Вот код:

(function($) { 
    $.fn.attrBegins = function(s) { 
     var matched = []; 
     this.each(function(index) { 
      var elem = this; 
      $.each(this.attributes, function(index, attr) { 
       if(attr.name.indexOf(s)===0){ 
        matched.push(elem); 
       } 
      }); 
     }); 
     return $(matched); 
    }; 
})(jQuery); 

Пример использования ...

HTML:

<div> 
    <div data-pet-dog></div> 
    <div data-pet-cat></div> 
</div> 

Javascript:

var foo = $("div").attrBegins("data-pet"); 
// results into... foo = [ <div data-pet-dog></div> , <div data-pet-cat></div> ] 

ПРИМЕЧАНИЕ: Для того, чтобы избежать проблем с производительностью при выборе элементов Wich есть имя атрибута, который начинается с пользовательской строки использованием attrBegins, рекомендуется как можно более сузить исходный селектор, чтобы уменьшить набор элементов для итерации. attrBegins просто фильтрует сбор предварительно выбранных элементов, он не исследует дочерние элементы предоставленного набора элементов.

Смежные вопросы