通過自定義數據屬性值查找元素

我想知道是否有一種方法可以根據數據屬性值使用jQuery（+ jQuery UI lib）使用javascript來選擇項目（div，span，whatever ..）。舉例來說，假設我有：通過自定義數據屬性值查找元素

<div class="b">Hi</div>

我然後一些數據分配給它：

$('.b').data('myKey', 1234);

然後，我想找到一個div（或多個div是）滿足條件的myKey = 1234。例如，像這樣：

var resultingElement = $('.b:data(myKey=1234)');

是否有可能在默認情況下，或者說我要實現這種選擇自己的？不，我不想爲此使用HTML5的可見數據屬性*。

來源

2012-10-26 skiedrius

這是否解決問題了嗎？ http://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value –

你爲什麼要選擇jQuery的'.data（）' *（這不是屬性）*？與使用實際屬性相比，這將是非常昂貴的操作。 –

您可以創建一個自定義的僞選擇讓一切變得簡單：http://jsfiddle.net/g2xKB/1/。

$.expr.pseudos.data = $.expr.createPseudo(function(args) { 
    var items = args.split(","); // the arguments (key, value) 

    $.each(items, function(i, item) { 
     item = item.trim(); 
     var isString = /^['"]|['"]$/.test(item); 
     item = item.replace(/^['"]|['"]$/g, ""); // remove quotes 

     if(!isString) { 
      item = +item; // if no quotes, it's a number 
     } 

     items[i] = item; 
    }); 

    return function(elem) { 
     return $.data(elem, items[0]) === items[1]; 
    } 
});

然後，您可以使用它，如下所示：

$(".b:data('myKey', 1234)").css("color", "red");

來源

2012-10-26 21:43:32 pimvdb

如果您執行'$ .data（elem，items [0]）'，您可以獲得一點性能提升。 –

var resultingElement = $('.b[data-myKey=1234]');

我不確定100％確定，但我認爲在某些時候數據屬性中存在駝峯式選擇器的問題。

來源

2012-10-26 21:38:59 Ohgodwhy

'.data（）'不會改變HTML中實際的'data-'屬性，所以不能以這種方式讀取。看[這個小提琴]（http://jsfiddle.net/8e9UN/1/）。 – Eric

試試這個

$("div.b").filter(function() { 
      return $.data(this, "myKey") == 1234; 
    });

來源

2012-10-26 21:41:27 YogeshWaran

通過自定義數據屬性值查找元素

回答

相關問題