1

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

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

 <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的元素？

4

3 回答 3

3

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

 <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')来获取所有这些元素。

于 2012-05-11T15:27:34.497 回答
3

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

于 2012-05-11T15:39:56.940 回答
1

我建议你根据这个转换你的标记：

<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
于 2012-05-11T15:39:46.527 回答