jQuery中有樣式選擇器嗎？

Question

如果我要選擇每一個形象，它的Alt是家庭例如，我可以做這樣的事情：

$("img[alt='Home']") 

但我怎麼能在一個單一的選擇每一個元素，他們的width CSS屬性是750px例如選擇？

編輯：如果沒有這樣的選擇器，是否有任何插件，或任何計劃在接下來的jQuery版本中做？

Answer 1

不一定是好主意，但你可以爲它添加一個新的灒選擇：

$.expr[':'].width = function(elem, pos, match) { 
    return $(elem).width() == parseInt(match[3]); 
} 

然後你可以使用像這樣：

$('div:width(970)') 

這將是驚人，慢但是，所以你想縮小你正在比較的元素的數量，例如：

$('#navbar>div:width(970)') 

只能選擇那些直徑爲navbar的後代，也有970px的寬度。

Answer 2

var $images = $("img").filter(function() { 
    return $(this).css('width') == '750px'; 
}); 

編輯：沒有插件我知道，或任何計劃，包括這樣的特定功能。您可以輕鬆地自己pluginify它，如（未經測試）：

$.fn.filterByWidth = function(width) { 
    var $images = $("img").filter(function() { 
     return $(this).css('width') == width; 
    }); 
    return $images; 
}; 

用法：

$images = $('#div img').filterByWidth('750px'); 
$images = $('#div img').filterByWidth('50%'); 
...etc... 

Answer 3

我不知道這是否會工作，但...：

${"[style*=width: 750px]") 

但是，使用類控制寬度，然後修改該類的所有實例的寬度...或更改爲其他類可能會更好：

$(".classname").removeClass("classname").addClass("otherclassname"); 

Answer 4

我有類似的問題。完成編寫一個插件來根據他們的計算風格選擇元素。

https://github.com/MikeCostello/query-declaration

jQuery的
$(":style({ width: 750px})")

Answer 5

這是一個古老的一個，但由於喬納森·德爾斯特羅瑟的答案，這讓我思考如何圓了這一點，多一點：

(function($){ 

    // Add commonly used regex to the jQuery object 
    var regex = { 
     digits: /^(-?\d+(?:\.\d+)?)([a-zA-Z]+)?$/ 
     ,expr: /^([\w-]+)\s*([:=<>])\s*([\w-\.]+(?:\([^\)]+\))?)$/ 
    }; 

    // Create a custom jQuery function that allows a bit more useful CSS extraction 
    $.fn.extend({ 
     cssExtract: function(cssAttr) { 

      var val = {prop:this.css(cssAttr)}; 

      if (typeof val.prop === "string") { 
       var match = regex.digits.exec(val.prop); 
       if (match) { 
        val.int = Number(match[1]); 
        val.metric = match[2] || "px" 
       } 
      } 

      return val; 

     } 
    }); 

    // Create the custom style selector 
    $.find.selectors[":"].style = function(el, pos, match) { 

     var search = regex.expr.exec(match[3]); 

     if (search) { 

      var style = search[1] 
       ,operator = search[2] 
       ,val = search[3] 
       ,target = $(el).cssExtract(style) 
       ,compare = (function(result){ 

       if (result) { 
        return { 
         int: Number(result[1]) 
         ,metric: result[2] || "px" 
        }; 
       } 

       return null; 

      })(regex.digits.exec(val)); 

      if (
       target.metric 
       && compare && compare.metric 
       && target.metric === compare.metric 
      ) { 

       if (operator === "=" || operator === ":") { 
        return target.int === compare.int; 
       } else if (operator === "<") { 
        return target.int < compare.int; 
       } else if (operator === ">") { 
        return target.int > compare.int; 
       } 

      } else if (target.prop && (operator === "=" || operator === ":")) { 
       return target.prop === val; 
      } 

     } 

     return false; 

    }; 

})(jQuery); 

您現在應該可以使用自定義style選擇器輕鬆查詢，如下所示：

$("div:style(height=57)") 

在這個答案的時候 - 應該返回堆棧溢出（本頁）的頂部div元素。

像這樣的事情，甚至將工作：

$("h3:style(color:rgb(106, 115, 124))") 

嘗試增加在開發工具的代碼在瀏覽器中。我在Chrome中進行了測試。沒有在其他人測試過。我也沒有花太多精力研究其他已有的庫/插件。