Ausblenden der übergeordneten div-Klasse, wenn die untergeordnete div-Klasse keinen Inhalt hat, wenn mehrere übergeordnete divs denselben Klassennamen haben

Ich habe einen Schieberegler, bei dem einige der Bilder im Schieberegler optional eine Fotovorlage mit Text oder Link enthalten können ein Popper. Ich würde gerne über alle Popper-Instanzen iterieren und wenn alle p-Tags in der .photo-credit p-Klasse leer sind, dann verstecke nur diese Instanz des Eltern-Popper. Ich habe versucht, eine Lösung aus anderen Posts zusammenzusetzen, aber ich konnte es nicht zum Laufen bringen. Der Code, den ich habe, verbirgt keinen Popper, wenn alle p Tags für diesen Popper leer sind. Ich bin ein JavaScript-Neuling und würde mich über jede Hilfe freuen.Ausblenden der übergeordneten div-Klasse, wenn die untergeordnete div-Klasse keinen Inhalt hat, wenn mehrere übergeordnete divs denselben Klassennamen haben

HTML

<div class="slider-wrapper"> 
<!--Required Root Element--> 
<div class="slider"> 
    <!--Required List Element--> 
    <div class="slider-list"> 
     <div class="slider-item"> 
      <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div> 
      <div class="slider-content-container"> 
       <h1>B LIne: The Place to Be</h1> 
       <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
      </div> 
      <div class="popper"> 
       <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
      </div> 
      <div class="photo-credit hide"> 
       <p><p><a href="http://www.someurl.com">A photo credit</a>.</p></p> 
       <p></p> 
      </div> 
     </div><div class="slider-item"> 
      <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div> 
      <div class="slider-content-container"> 
       <h1>July 4th: You missed it!</h1> 
       <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
      </div> 
      <div class="popper"> 
       <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
      </div> 
      <div class="photo-credit hide"> 
       <p></p> 
       <p></p> 
      </div> 
     </div><div class="slider-item"> 
      <div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div> 
      <div class="slider-content-container"> 
       <h1>Festival coming Aug. 31st!</h1> 
       <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
      </div> 
      <div class="popper"> 
       <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
      </div> 
      <div class="photo-credit hide"> 
       <p></p> 
       <p></p> 
      </div> 
     </div> 
    </div> 
</div> 

<a href="#" class="slider-control-prev"><img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a> 
<a href="#" class="slider-control-next"><img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a> 

<p class="slider-pagination"></p> 

</div>

JavaScript

 $('.popper').each(function() { 
      //var $thisPopper = $(this); 
      var hasContent = 0; 
      $('.photo-credit p').each(function() { 
       if($(this).html().length > 0) { 
        hasContent++; 
       } 
      }); 
      if(hasContent > 0){ 
       //$thisPopper.hide(); 
       $(this).hide(); 
      } 
     });

Quelle

2017-08-01 lorigar

Sie trägt dazu bei, die richtige Richtung war. Allerdings ein paar Fehler in Ihrem Javascript. Sie haben versucht, alle Div mit "Popper" -Klasse anzusprechen. Allerdings sind die Div mit "Popper" und "Foto-Kredit" auf dem gleichen Niveau. Warum nicht stattdessen auf ihre Eltern-Div ausrichten?

Versuchen Sie diesen Code. Es wird getestet (Link to jsfiddle)

$('.slider-item').each(function() { 
     var thisSilerItem = $(this); 
     var hasContent = 0; 
     thisSilerItem.find('.photo-credit p').each(function() { 
      if($(this).html().length > 0) { 
       hasContent++; 
      } 
     }); 
     if(hasContent <= 0){ 
      thisSilerItem.find('.popper').hide(); 
     } 
    });

bearbeiten: Bonus: Wenn Ihre Seite eine große Menge an Schieber hat, diese jquery Lösung wird einige UX Probleme verursachen („schreckhaft“ div am/nach dem Laden der Seite)

Versuchen Sie eine CSS-Lösung.

Wenn Sie Ihre DOM-Elemente rendern. Fügen Sie eine Klasse zu "popper" div hinzu, wenn der Inhalt von "photo-credit" leer ist.

<div class="popper hide"> 
// img 
</div>

in Ihrem CSS Dann fügen Sie

.popper.hide { display: none; }

Quelle

2017-08-02 00:26:23

Arbeitete perfekt. Vielen Dank! – lorigar

Es ist schwer zu voll sammeln, was Sie tun wollen, aber wenn ich das richtig verstehe ...

$('.popper').each(function() { 

    var photoCredit = $(this).find(".photo-credit p") 

    if ($(photoCredit).is(':empty')){ 
     $(this).hide(); 
    } 

});

Es lohnt sich, darauf hinzuweisen t dass CSS4-Entwickler an einem 'has' Selektor arbeiten, aber ab Juli 2017 gibt es noch keine Unterstützung für einen Browser.

Es wird erwartet, in der folgenden Art und Weise zu arbeiten:

.popper:has(> p:empty) { display: none }

Ich hoffe, das ... :)

Quelle

2017-08-02 00:12:51 SC87

war ich nicht in der Lage, dies zu erhalten, wie erwartet zu arbeiten, aber schätzen die Hilfe. Vielen Dank! – lorigar

Sorry, ich könnte nicht viel Hilfe sein ... Wenn Sie eine Geige oder einen Codepen mit dem vorher geposteten HTML und einigem CSS erstellen, kann ich es sicherlich für Sie ansehen ... einfach den Link hier posten – SC87

Sie diesen Code überprüfen.

 $.each($('.popper'), function (index, popper) { 
      var isEmptry = true; 
      $.each($(popper).next('.photo-credit').children(), function (index, ptag) { 
       if ($.trim($(ptag).html()) != '') 
        isEmptry = false; 
      }); 
      if (isEmptry) 
       $(popper).hide(); 
     });

Arbeits Code

$.each($('.popper'), function (index, popper) { 
 
    var isEmptry = true; 
 
    $.each($(popper).next('.photo-credit').children(), function (index, ptag) { 
 
     if ($.trim($(ptag).html()) != '') 
 
      isEmptry = false; 
 
    }); 
 
    if (isEmptry) 
 
     $(popper).hide(); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div class="slider-wrapper"> 
 
    <!--Required Root Element--> 
 
    <div class="slider"> 
 
     <!--Required List Element--> 
 
     <div class="slider-list"> 
 
      <div class="slider-item"> 
 
       <div class="slider-image-container"> 
 
        <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /> 
 
       </div> 
 
       <div class="slider-content-container"> 
 
        <h1>B LIne: The Place to Be</h1> 
 
        <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
 
       </div> 
 
       <div class="popper"> 
 
        <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
 
       </div> 
 
       <div class="photo-credit hide"> 
 
        <p> 
 
         <p><a href="http://www.someurl.com">A photo credit</a>.</p> 
 
        </p> 
 
        <p></p> 
 
       </div> 
 
      </div> 
 
      <div class="slider-item"> 
 
       <div class="slider-image-container"> 
 
        <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> 
 
       </div> 
 
       <div class="slider-content-container"> 
 
        <h1>July 4th: You missed it!</h1> 
 
        <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
 
       </div> 
 
       <div class="popper"> 
 
        <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
 
       </div> 
 
       <div class="photo-credit hide"> 
 
        <p></p> 
 
        <p></p> 
 
       </div> 
 
      </div> 
 
      <div class="slider-item"> 
 
       <div class="slider-image-container"> 
 
        <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> 
 
       </div> 
 
       <div class="slider-content-container"> 
 
        <h1>Festival coming Aug. 31st!</h1> 
 
        <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> 
 
       </div> 
 
       <div class="popper"> 
 
        <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> 
 
       </div> 
 
       <div class="photo-credit hide"> 
 
        <p></p> 
 
        <p></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <a href="#" class="slider-control-prev"> 
 
     <img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a> 
 
    <a href="#" class="slider-control-next"> 
 
     <img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a> 
 

 
    <p class="slider-pagination"></p> 
 

 
</div>

Quelle

2017-08-02 00:33:21

Ausblenden der übergeordneten div-Klasse, wenn die untergeordnete div-Klasse keinen Inhalt hat, wenn mehrere übergeordnete divs denselben Klassennamen haben

Antwort

Verwandte Themen