Użycie jQuery do wybrania elementów o stylu "widoczność: widoczna" lub "widoczność: ukryta" NIE "Wyświetl: brak"

Jak wybrać tylko widoczne elementy za pomocą jQuery?Użycie jQuery do wybrania elementów o stylu "widoczność: widoczna" lub "widoczność: ukryta" NIE "Wyświetl: brak"

jQuery selektory: widoczny i: ukryty tylko respects display: none as naprawdę ukryty? NIE widoczność: ukryta lub widoczność: widoczna.

Rozumiem, że nie są technicznie ukryte because they still take their space. Chcę tylko poznać ich stan, abym mógł zaznaczyć pola wyboru, które są widoczne.

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

Źródło

2010-02-17 Peter Samuel

Można użyć funkcji css aby uzyskać styl elementu, a funkcja filter je wybrać ze zbioru elementów:

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

Źródło

2010-02-17 11:01:21 Guffa

+1 za dostarczenie rozwiązania (nawet jeśli nie wykopałeś tego, co się dzieje :) – karim79

Świetnie, dzięki chłopaki! I skończyło się to z łańcuchowym zmniejszyć mój zestaw wyników. $ ("input [type = checkbox]") Filtr (function() { \t \t \t \t Return ($ (this) .css ('widoczność! ') ==' ukryte '|| $ (this).css ("display") == "none"); \t \t \t}) każda (funkcja() { \t \t \t \t this.checked = prawdziwa;. \t \t \t}); –

Sprawdź również moją odpowiedź, aby uzyskać więcej możliwości ponownego użycia za pomocą niestandardowego selektora jquery. –

Od jQuery 1.3.2 release notes (visible /: ukryty Regenerowane):

w jQuery 1.3.1 (i starsze) element był widoczny, jeśli jego CSS
"display" nie było „none”, jego CSS
„widoczność” nie był „ukryty” i
jego rodzaj (jeśli było to wejście) została nie "ukryty".

w jQuery 1.3.2 element jest widoczny, jeśli jego przeglądarka zgłaszane offsetWidth lub offsetHeight jest większa niż 0.

Co ta zmiana oznacza? Oznacza to, że jeśli wyświetlacz CSS twojego elementu to "none" lub dowolny element z jego elementu nadrzędnego/przodka to "none", lub jeśli szerokość elementu wynosi 0, a wysokość elementu wynosi , to element będzie zgłoszono jako ukryte.

Źródło

2010-02-17 10:46:57 karim79

+1 za kopanie się, co się dzieje (nawet jeśli nie zapewnia Rozwiązaniem problemu). – Guffa

stworzyłem własną niestandardową selektor : pokazano dla tego. Zastosowanie:

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

Albo (ETC):

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

Wystarczy włączyć ten prosty kod gdzieś:

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

Źródło

2015-11-13 09:15:40

Użycie jQuery do wybrania elementów o stylu "widoczność: widoczna" lub "widoczność: ukryta" NIE "Wyświetl: brak"

Odpowiedz

Powiązane problemy