Verwenden von jQuery zum Auswählen von Elementen mit dem Stil "visibility: visible" oder "visibility: hidden" NICHT "display: none"

Wie wählen Sie nur sichtbare Elemente mit jQuery aus?Verwenden von jQuery zum Auswählen von Elementen mit dem Stil "visibility: visible" oder "visibility: hidden" NICHT "display: none"

jQuery Selektoren: sichtbar und: versteckt nur respektiert display: keine als wirklich versteckt? NICHT Sichtbarkeit: versteckt oder Sichtbarkeit: sichtbar.

Ich verstehe, dass sie technisch nicht versteckt sind because they still take their space. Ich will nur ihren Status wissen, damit ich Checkboxen, die sichtbar sind, ankreuzen kann.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>jQuery :visiblity Selector Test</title> 

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#VisibleCount").text($("input[type=checkbox]:visible").length); //returns 3. I think it should be 2 
     $("#HiddenCount").text($("input[type=checkbox]:hidden").length); //returns 1. I think it should be 2 
    }); 
</script> 

<style type="text/css"> 
    #TestArea 
    { 
     border: solid red 1px; 
    } 
    #Results 
    { 
     background-color: Lime; 
    } 
    .container 
    { 
     border: solid black 1px; 
    } 
</style> 
</head> 
<body> 
<div id="TestArea"> 
    <div class="container"> 
     visibility: hidden;<div style="visibility: hidden;"> 
      <input id="Checkbox1" type="checkbox" /> 
     </div> 
    </div> 
    <div class="container"> 
     visibility: visible;<div style="visibility: visible;"> 
      <input id="Checkbox2" type="checkbox" /> 
     </div> 
    </div> 
    <div class="container"> 
     display: none;<div style="display: none;"> 
      <input id="Checkbox3" type="checkbox" /> 
     </div> 
    </div> 
    <div class="container"> 
     display: inline;<div style="display: inline;"> 
      <input id="Checkbox4" type="checkbox" /> 
     </div> 
    </div> 
</div> 
<div id="Results"> 
    <div> 
     Visible Count: <span id="VisibleCount"></span> 
    </div> 
    <div> 
     Hidden Count: <span id="HiddenCount"></span> 
    </div> 
</div> 
</body> 
</html>

Quelle

2010-02-17 Peter Samuel

können Sie verwenden, um die css Funktion den Stil des Elements zu erhalten, und die filter Funktion sie aus einer Sammlung von Elementen zu wählen:

var visible = $('input[type=checkbox]').filter(function() { 
    return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none'); 
});

Quelle

2010-02-17 11:01:21 Guffa

+1 für die Bereitstellung einer Lösung (auch wenn Sie nicht ausgraben, was passiert :) – karim79

Großartig, danke Jungs! Ich landete mit diesem mit Chaining bis zu meinem Ergebnismenge zu reduzieren. $ ("input [type = Checkbox]") filtern (function() { \t \t \t \t return ($ (this) css ('Sichtbarkeit! ') ==' versteckt '|| $ (this).css ('display') == 'none'); \t \t \t}), die jeweils (function() { \t \t \t \t this.checked = true;. \t \t \t}); –

Überprüfen Sie auch meine Antwort für mehr Wiederverwendbarkeit mit einem benutzerdefinierten jquery-Selektor. –

Von der jQuery 1.3.2 release notes (Sichtbar /: Überarbeitete Versteckt):

In jQuery 1.3.1 (und älter) ein Element sichtbar war, wenn seine CSS
"Anzeige" nicht war „none“, seine CSS
„Sichtbarkeit“ war nicht „versteckt“ und
seine Art (wenn es eine Eingabe ist) wurde nicht "versteckt".

In jQuery 1.3.2 ein Element ist sichtbar, wenn ihr Browser gemeldet-ist größer offset oder offset als 0.

Was bedeutet diese Änderung? Es bedeutet , dass, wenn die CSS-Anzeige Ihres Elements "none" ist oder eines seiner Eltern/Vorfahren "none" ist, oder wenn die Elementbreite 0 ist und die Element Höhe 0 ist, dann wird ein Element sein gemeldet als versteckt.

Quelle

2010-02-17 10:46:57 karim79

+1 für ausgrub, was passiert (auch wenn es keinen bereitstellt Lösung für das Problem). – Guffa

Ich habe meinen eigenen benutzerdefinierten Selektor erstellt: gezeigt für diese. Verbrauch:

var visible = $('input[type=checkbox]').is(':shown');

Or (etc.):

$("#VisibleCount").text($("input[type=checkbox]:shown").length);

Genau um diesen einfachen Code irgendwo:

jQuery.extend(jQuery.expr[':'], { 
    shown: function (el, index, selector) { 
    return $(el).css('visibility') != 'hidden' && $(el).css('display') != 'none' && !$(el).is(':hidden') 
    } 
});

Quelle

2015-11-13 09:15:40

Verwenden von jQuery zum Auswählen von Elementen mit dem Stil "visibility: visible" oder "visibility: hidden" NICHT "display: none"

Antwort

Verwandte Themen