कोई दृश्यमान बच्चों के साथ तत्वों का jquery चयन

Question

मेरा लक्ष्य यहां है: किसी तत्व पर कुछ करें, <optgrooup>, यदि उसके सभी बच्चे अदृश्य हैं।

नीचे मेरा कोड लाल रंग में रेखांकित करता है यदि उसके पास कोई अदृश्य बच्चों है। लेकिन मैं ऐसा करना चाहता हूं अगर सभी बच्चे अदृश्य हैं। यदि तत्व में कोई भी बच्चा दिखाई दे रहा है, तो इसे हाइलाइट न करें।

मैं ऐसा करने के लिए jQuery चयनकर्ता को कैसे बदल सकता हूं?

अग्रिम धन्यवाद।

<select multiple="multiple" name="availableInstanceId" id="availableInstanceId"> 
<optgroup label="Option Group 1"> 
    <option >visible item 1</option> 
    <option >visible item 2</option> 
</optgroup> 
<optgroup label="Option Group 2 - Should be highlighted"> 
    <option style="display:none;">invisible A</option> 
    <option style="display: none">invisible B</option> 
</optgroup> 

<optgroup label="Option Group 3 - Should not be highlighted"> 
    <option >visible C</option> 
    <option style="display: none">invisible D</option> 
</optgroup></select> 

<script type="text/javascript"> 
var filterOptions = function(e) { 
    // Goal: highlight the <optgroup>'s that have *only* invisible children 
    $('#availableInstanceId > * > *:hidden').parent().css("border","3px solid red"); 
} 
$(document).ready(function() { 
    filterOptions(); 
}); 
</script> 

यहाँ छवि का स्क्रीनशॉट: http://img144.imageshack.us/img144/556/selectexample.gif

Answer 1

आप सभी की एक सरणी की तुलना करनी होगी: दिखाई बनाम:

यहां छिपा हुआ है कुछ छद्म कोड

if ($("#element:hidden").length == $("#element:visible").length) { 
    // Do stuff 
} ... 

Answer 2

यह करने के लिए दो लाइनों के बारे में कैसे? इसे प्रत्येक तत्व के लिए चालू करने के लिए, और एक व्यक्ति को एक दृश्य बच्चे के साथ फिर से बंद करने के लिए?

$('#availableInstanceId > *').css("border","3px solid red"); 
$('#availableInstanceId > * > *:visible').parent().css("border","none"); 

Answer 3

मान लें कि आप कोई भी बच्चा तत्वों के साथ तत्वों को बाहर निकालना चाहते:

$(":has(*):not(:has(:visible))") 

Working example.

अद्यतन: यह है मेरी मूल जवाब की तुलना में बेहतर प्रदर्शन:

$(":hidden").parent().not($(":visible").parent()) 

Answer 4

यह बहुत बेहतर perfo है मेरी original answer से rmance:

$(":hidden").parent().not($(":visible").parent()) 

Answer 5

क्रेडिट Jed Schmidt को जाता है। निम्नलिखित कोड IE8 में काम करता है।

ध्यान दें कि IE8 display: none शैली के बावजूद <option> तत्वों को वास्तव में छुपा नहीं है। यह भी <optgroup> तत्वों के लिए border शैलियों को स्वीकार नहीं करता है।

कार्य नमूना: http://jsbin.com/aquya (http://jsbin.com/aquya/edit के माध्यम से संपादन योग्य)

$(document).ready(function() { 
    // Prevent CSS inherits 
    $("option").css('backgroundColor', 'white') 

    $("option") 
    .filter(function(){ 
     return this.style.display == 'none'; 
    }) 
    .parent() 
    .not($('option').filter(function(){ 
     return this.style.display != 'none'; 
    }).parent()) 
    .css('backgroundColor', 'blue') 
    .css('border', '1px solid red'); //this doesn't work in IE8 
}); 

Answer 6

// जवाब बदलते सीएसएस सवाल करने के लिए के रूप में वांछित

if($.browser.msie || $.browser.safari){ 

     $('optgroup:not(:has(:hidden))').css("border","3px solid red"); 

    } else { 

     $('optgroup:not(:has(:visible))').css("border","3px solid red"); 

    } 

// खाली optgroups उदाहरण हटाने

if($.browser.msie || $.browser.safari){ 

     $('optgroup:not(:has(:hidden))').remove(); 

    } else { 

     $('optgroup:not(:has(:visible))').remove(); 

    }