jQuery-как выбрать значение по имени атрибута начинается с

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

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

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

заранее спасибо за помощь.

11
attr jquery selector startswith

4 ответов

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

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

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

редактировать

чтобы получить все виды атрибутов "начинается с", вы можете настроить свой собственный селектор 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>
22

Вы можете сделать это как плагин 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" />
2

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

вот код:

(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> ]

Примечание: предотвратить проблемы представления когда выбор элементов с именем атрибута, который начинается с пользовательской строки используя attrBegins, рекомендуется максимально сузить исходный селектор, чтобы уменьшить коллекцию элементов для итерации. attrBegins просто фильтрует коллекцию предварительно выбранных элементов, она не исследует дочерние элементы предоставленного набора элементов.

1

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

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