wake-up-neo.com

Wie kann man mit jQuery nur sichtbare Elemente finden und versteckte Elemente in Ruhe lassen?

Also beginne ich mit den Punkten 1-4:

<div class="someDiv bold italic" style="display: none;">Lorem</div>
<div class="someDiv regular italic" style="display: block;">Lorem</div>
<div class="someDiv bold" style="display: none;">Ipsum</div>
<div class="someDiv regular" style="display: block;">Ipsum</div>

Dann habe ich einige Eingabekästchen:

<input class="regular" type="checkbox" />
<input class="bold" type="checkbox" />
<input class="italic" type="checkbox" />

Im Grunde genommen habe ich jQuery, um divs anzuzeigen und zu verbergen. Jetzt habe ich eine weitere Funktion, die diese Divs durchlaufen muss (eine für jedes Kontrollkästchen) und die anhand anderer Kriterien ein-/ausgeblendet werden muss. Aber ich möchte nicht, dass die bereits ausgeblendeten Divs wieder angezeigt werden.

$(".someDiv").each(function(){
  if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  };

In diesem Beispiel sollte das letzte Div das einzige verbleibende Div sein. Leider werden mit diesem Code die zweiten und vierten Divs angezeigt.

Dieser Code ist ein sehr einfaches Beispiel für alle Filter, die ich anwenden, hinzufügen usw. werde.

javascriptjquerytoggleshow-hide
46
o_O

Sie können den : visible Selektor verwenden, um nur sichtbar zu finden.

$(".someDiv:visible").each(....);

Sie können den . Not () Selektor verwenden, um nur versteckte zu finden.

$(".someDiv").not(":visible").each(....);

Ich denke, Sie können den gleichen Vorgang in Ihrem Code mit dieser einen Zeile ausführen.

$(".someDiv").hide().find(".regular").show();

Finde alle .someDiv und verstecke sie, dann finde die mit einem .regular Klasse und zeigen sie.

75
Reactgular

Du könntest benutzen :visible Selektor zur Auswahl des .someDiv die sichtbar sind.

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});

Hier ist eine weitere lustige Möglichkeit, die Verkettung zu nutzen :) und eine einzelne Zeile daraus zu machen.

$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
10
PSL

Sie können dies auf zwei Arten tun: Sie können eine weitere Klasse für die display: none - Elemente hinzufügen und sie über css unsichtbar machen, oder Sie können die css-Eigenschaft über jquery herausfinden

über CSS-Klasse

html

<div class="someDiv bold italic hidden" >Lorem</div>
<div class="someDiv regular italic" >Lorem</div>
<div class="someDiv bold hidden" >Ipsum</div>
<div class="someDiv regular" >Ipsum</div>

cSS

.someDiv{
    display: block;
}

.hidden{
    display: none;
}

js

$(".someDiv").each(function(){
  if($(this).hasClass("hidden")){
    $(this).show();
  } else {
    $(this).hide();
  };

via jquery

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});
2
Niche

Sie können dafür den Selektor :not() verwenden und die Ergebnisse filtern, bevor Sie in die Funktion .each() gehen:

$(".someDiv:not(:hidden)").each(function(){
1
Ja͢ck