jquery如何查找针对属性名称搜索的元素

Question

我有一个非常具体的查询，如何找到具有某个属性的所有元素。

我的元素具有遵循特定模式的属性，以下是一些示例：

 <div data-jtemplate-href="x"></div>
 <span data-jtemplate-text="x"></span>
 <input data-jtemplate-something="x"/>
 <table data-jtemplate-else="x"></table>

如您所见，我所有的元素都具有名称前缀为'data-jtemplate'的属性，我如何找到所有带有属性前缀data-jtemplate的元素？

Answer 1

创建您自己的表达式，请参阅http://jsfiddle.net/6pCh4/

$.expr[":"].dataAttrStartingWith = function(el, i, m) {
  for (var p in $(el).data()) {
     if (p.substring(0, m[3].length) === m[3]) return true;    
  }
  return false;
};  


console.log($('body *:dataAttrStartingWith(jtemplate)'))

此表达式将过滤所有具有data-jtemplate-* 属性的元素（正如您在小提琴中看到的那样，我添加了另一个被此过滤器正确丢弃的元素）

当然，这可以通过其他 data-* 属性进行自定义（只需在选择器中更改 jtemplate）

Answer 2

只需添加另一个您可以搜索的属性（数据或其他）：

 <div class="jtemplate" data-jtemplate-href="x"></div>
 <span class="jtemplate" data-jtemplate-text="x"></span>
 <input class="jtemplate" data-jtemplate-something="x"/>
 <table class="jtemplate" data-jtemplate-else="x"></table>

无需将其定义为 CSS 样式。现在您只需要选择器$('.jtemplate') 来获取所有这些元素。

Answer 3

我建议你按照这个来转换你的标记：

<div "data-jtemplate"="href-x"></div>
<span "data-jtemplate"="text-y"></span>
<input "data-jtemplate"="something-z" />
<table "data-jtemplate"="else-v"></table>

现在您可以进行非常简单的搜索：

var jTemplate = $("*[data-jtemplate]") // selects all elements with that prefix
$("*[data-jtemplate^='href-']", jTemplate) // select all elements with href in jTemplate scope
$("*[data-jtemplate^='text-']").each( function(i, ele)
{
   var attr = $(this).attr("data-jtemplate").replace("text-",""); // gives you actual value of the attribute
});

更新：

<div 'data-jtemplate'='{href:"http://example.com",text:"example",attr:10,private:false}'></div> 
// {href:"http://example.com",text:"example",attr:10,private:false} -> easy to create on the server

var json = $("[data-jtemplate]").eq(0).attr("data-jtemplate");
var parsedData = $.parseJSON(json);
var href = parsedData.href; // etc -- easy to access