क्या jQuery में कोई स्टाइल चयनकर्ता है?

Question

मैं हर छवि है जो यह alt है का चयन करना चाहते हैं, उदाहरण के लिए होम है, मैं कुछ इस तरह कर सकते हैं:

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

लेकिन यह कैसे मैं एक एकल में हर तत्व होंगे जो width सीएसएस संपत्ति उदाहरण के लिए 750px है चुन सकते हैं चयनकर्ता?

संपादित करें: यदि कोई ऐसा चयनकर्ता नहीं है, तो क्या कोई प्लगइन है, या अगले jQuery संस्करणों में ऐसा करने की कोई योजना है?

Answer 1

नहीं जरूरी एक बहुत अच्छा विचार है, लेकिन आप इसके लिए एक नया कड़ाके की धूप चयनकर्ता जोड़ सकते हैं:

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

जो आप तो इतनी तरह इस्तेमाल कर सकते हैं:

$('div:width(970)') 

जा रहा है यही कारण है कि horrifically धीमा हो हालांकि, आप उन तत्वों की संख्या को कम करना चाहते हैं जिनकी आप तुलना कर रहे हैं जैसे कि

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

केवल उन divs का चयन करें जो navbar के प्रत्यक्ष वंशज हैं, जिनकी चौड़ाई 970 पीएक्स भी है।

Answer 2

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

संपादित करें: कोई प्लगइन नहीं है जिसे मैं जानता हूं, या ऐसी विशिष्ट कार्यक्षमता को शामिल करने की कोई योजना है। आप आसानी से यह अपने आप को इस तरह के (untested) के रूप में 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

यह एक पुरानी है, लेकिन जोनाथन डेल Strother के जवाब के लिए धन्यवाद, यह मेरे कि यह कैसे बाहर थोड़ा और दौर के लिए पर सोच मिला:

(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))") 

प्रयास आपके ब्राउज़र में डेवलपर उपकरण में कोड जोड़ने। मैंने क्रोम में इसका परीक्षण किया। दूसरों में इसका परीक्षण नहीं किया है। मैंने अन्य पूर्व-मौजूदा पुस्तकालयों/प्लगइन के बाहर शोध करने में भी बहुत अधिक काम नहीं किया।