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

Lesezeit: 2 Minuten

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 Eingabe-Checkboxen:

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

Im Grunde habe ich also jQuery, das Divs anzeigt und ausblendet. Jetzt habe ich eine andere Funktion, die diese Divs durchlaufen muss (eine für jedes Kontrollkästchen) und basierend auf anderen Kriterien ein- / ausblenden muss. Aber ich möchte nicht, dass die bereits ausgeblendeten Divs erneut angezeigt werden.

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

In diesem Beispiel sollte das einzige verbleibende div das letzte div sein. Leider wird dieser Code das zweite und vierte Div anzeigen.

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

Wie finden Sie mit jQuery nur sichtbare Elemente und lassen
Reactgular

Du kannst den … benutzen :sichtbar Selektor, um nur sichtbar zu finden.

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

Du kannst den … benutzen .nicht() Selektor, um nur versteckte zu finden.

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

Ich denke, Sie können mit dieser einen Zeile die gleiche Operation in Ihrem Code ausführen.

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

Finde alle .someDiv und verstecke sie, dann finde die mit a .regular Klasse und zeige sie.

  • Was ist mit versteckten Tasten? $('button:visible') ?

    – Akin Hwan

    8. März ’19 um 23:08

Wie finden Sie mit jQuery nur sichtbare Elemente und lassen
PSL

Du könntest benutzen :visible Selektor zum Auswählen der .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 verwenden 🙂 und sie zu einer einzigen Linie zu machen.

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

  • @PSL .someDiv.regular:visible ist bereits sichtbar, also tut show nichts.

    – Reactgular

    28. Mai ’13 um 2:40

  • $(".someDiv").not(".regular").hide();

    – Reactgular

    28. Mai ’13 bei 2:42

1641780736 445 Wie finden Sie mit jQuery nur sichtbare Elemente und lassen
Nische

Sie können dies auf zwei Arten tun: Sie können eine weitere Klasse für die display: none Elemente und machen Sie sie über CSS unsichtbar, 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();
  };

über jquery

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

Du kannst den … benutzen :not() Auswahl dafür und filtern Sie die Ergebnisse, bevor Sie in die .each():

$(".someDiv:not(:hidden)").each(function(){

.

262450cookie-checkWie finden Sie mit jQuery nur sichtbare Elemente und lassen versteckte Elemente in Ruhe?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy