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

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

 <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 2

创建自己的表达式，请参阅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 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

jquery如何根据属性名称查找元素搜索

3 个答案: