jquery Auswahl von Elementen ohne sichtbare Kinder

Hier ist mein Ziel: etwas tun, auf ein element, ein <optgrooup>, wenn alle seine Kinder sind unsichtbar.

Mein code unten beschreibt die in rot, wenn es alle invisible children. Aber ich will dies nur tun, wenn alle die Kinder unsichtbar sind. Wenn das element hat keine Kinder, die sichtbar sind, dann nicht markieren.

Wie kann ich Sie optimieren die jQuery-Selektor zu tun?

Vielen Dank im Voraus.

<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>

Screenshot von dem Bild hier: http://img144.imageshack.us/img144/556/selectexample.gif

Was den Vergleich der Längen des arrays, zwischen der unsichtbaren und der Gesamt-Kinder?

InformationsquelleAutor Glen | 2009-05-08

13

Vorausgesetzt, Sie ausschließen möchten Elemente, die keine untergeordneten Elemente:
```
 $(":has(*):not(:has(:visible))")
```
Beispiel arbeiten.

UPDATE: Dieser hat eine wesentlich bessere performance als meine ursprüngliche Antwort:
```
$(":hidden").parent().not( $(":visible").parent() )
```
- Tatsächlich, es ist ein schneller Weg, dies zu tun mit "traversal" anstelle von "Auswahl": "stackoverflow.com/questions/841401/...
- Das Beispiel funktioniert für mich in FF, aber nicht auf IE 8 (XP) - gibt es bekannte Probleme mit jQuery und IE8?
- Weder von Jed ' s Antworten funktioniert im IE8 nicht, weil jQuery ist gebrochen, aber da der IE8 nicht verstecken der Optionen!
- Guter Fang, Brian. Funktioniert es, wenn Sie dieses nutzen? $("option") .filter( function zurück(){ dieses.Stil.display == "none" }) .parent().nicht( $(":visible").parent() )
- Es funktioniert nicht ganz. Nehmen Sie es einen Schritt weiter. Ich habe ein community-Antwort mit dem richtigen code.
InformationsquelleAutor Jed Schmidt
2

Dieser hat eine wesentlich bessere performance als meine original Antwort:
```
$(":hidden").parent().not( $(":visible").parent() )
```
- Würden Sie bitte erklären, die Logik des Codes?
InformationsquelleAutor Jed Schmidt
1

Wie wäre es mit zwei Linien zu tun? Eine, um es einzuschalten für jedes einzelne element, und einer zum ausschalten, wieder für jeden mit einem Kind sichtbar?
```
$('#availableInstanceId > *').css("border","3px solid red");
$('#availableInstanceId > * > *:visible').parent().css("border","none");
```
InformationsquelleAutor Samir Talwar
1

Kredit geht an Jed Schmidt. Der folgende code funktioniert in IE8.

Hinweis, dass der IE8 eigentlich gar nicht verstecken, die <option> Elemente trotz der display: none Stil. Auch der IE8 scheint nicht zu akzeptieren border Stile für <optgroup> Elemente.

Beispiel arbeiten: http://jsbin.com/aquya (Editable via 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
});
```
- Danke, das war toll, zumindest für die Betonung Leider, was ich wirklich tun möchte, ist verbergen die optgroup, nicht markieren. Ich sollte haben gesagt, dass in der ursprünglichen Frage - ich glaube nicht, es würde einen Unterschied machen, da meine größte Sorge war der Selektor - aber es stellt sich heraus, dass es macht schon einen Unterschied, da wie Sie bereits erwähnt, der IE hat einen bug, zu verstecken, wählen Sie Optionen (und optgroups - siehe dev.jquery.com/ticket/1100). So wie es aussieht bin ich kein Glück mit IE
- Wenn es Ihnen nichts ausmacht die zusätzliche Arbeit und Komplikation, könnten Sie wahrscheinlich fake it, indem Sie vorübergehend löschen der Elemente, die Sie ausblenden möchten (ich vermute, der IE mag nicht, dass entweder).
InformationsquelleAutor

//Antwort auf Frage ändern css wie gewünscht

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

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

    } else {

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

    }

//remove empty optgroups Beispiel

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

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

    } else {

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

    }

InformationsquelleAutor David Lefkon

0

Müssen Sie vergleichen ein array von alle :sichtbar vs. :hidden

hier einige pseudo-code
```
if ($("#element:hidden").length == $("#element:visible").length) {
  //Do  stuff
} ...
```
InformationsquelleAutor JP Silvashy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.