Kann ich CSS verwenden, um diese HTML-Struktur zu ändern?

Question

Ich habe eine sehr starre HTML-Struktur, die eine Galerie von Bildern anzeigt. Bilder sind alphabetisch gruppiert.

Demo: http://codepen.io/sol_b/pen/aBpbxz

HTML für jedes Panel:

<div class="item"> 
     <h2>A</h2> 
     <div class="image"> 
      <img src="image.jpg"> 
     </div> 
</div> 

Was ich möchte, getrennt zu tun ist, die jeweils alphabetisch Gruppe.

So: http://codepen.io/sol_b/pen/LbxVRr

Leider kann ich die HTML nicht ändern, nur CSS (oder JavaScript, wenn dies erforderlich ist).

Ich habe versucht Positionierung, Schwimmer, Breiten. Was es schwieriger macht, ist, dass jedes Element eine Überschrift erhält, egal ob es Inhalt anzeigt oder nicht.

Ist das mit CSS überhaupt möglich?

Eine Sache, die ich in Betracht zog, war das Hinzufügen eines <br> Tags vor jeder Überschrift, die Inhalt hat. Beispiel:

var breakTag = document.createElement('br'); 
var element = document.getElementsByTagName('h2'); 

if(element.innerHTML == ""){ 
    element.insertBefore(breakTag); 
} 

Jedoch habe ich vor dem Punkt zum Ziel benötigen würde, und nicht vor dem h2, die ich bin nicht sicher, wie das zu tun.

Jede Hilfe sehr geschätzt.

Answer 1

var breakTag = document.createElement('br'), 
 
    elems = document.getElementsByTagName('h2'), 
 
    parentDiv = document.getElementsByClassName('content')[0]; 
 

 
for (var i = 0; i < elems.length; i++) { 
 
    if (elems[i].innerText !== '') { 
 
    parentDiv.insertBefore(breakTag.cloneNode(true), elems[i].parentNode); 
 
    } 
 
}

.wrapper { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
h2 { 
 
    font-size: 16px; 
 
    font-family: sans-serif; 
 
} 
 

 
br { 
 
    display: block; 
 
    content: ""; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 33%; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    width: 240px; 
 
    height: 120px; 
 
    position: relative; 
 
} 
 

 
.name { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    background-color: #1a1a1a; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    opacity: 0; 
 
    transition: 0.1s ease-in-out; 
 
    width: 240px; 
 
    height: 120px; 
 
    display: table; 
 
    box-sizing: border-box; 
 
    padding: 20px; 
 
} 
 

 
.name:hover { 
 
    opacity: 1; 
 
} 
 

 
.name span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    cursor: default; 
 
    font-family: sans-serif; 
 
    letter-spacing: 3px; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <div class="item"> 
 
     <h2>A</h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2></h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2></h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2></h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2>B</h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2></h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2>C</h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2></h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="item"> 
 
     <h2>D</h2> 
 
     <div class="image"> 
 
     <img src="http://placehold.it/240x120"> 
 
     <div class="name"> 
 
      <span>Title</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

var breakTag = document.createElement('br'); 
var elements = document.getElementsByTagName('h2'); 

for(var element of elements){ 
    if(element.innerHTML){ 
     element.parentNode.parentNode.insertBefore(breakTag.cloneNode(true), element.parentNode); 
    } 
} 

Answer 3

Um eine Pause vor jedem Element mit der Klasse 'item' hinzufügen, die eine nicht-leere h2 hat Sie so etwas wie

var sections = document.getElementsByClassName('item'); 
for (var section of sections) { 
    let heading = section.getElementsByTagName('h2')[0]; 
    if (!heading || !heading.innerHtml) { continue; } 
    section.parent.insertBefore(document.createElement('br'), section); 
} 

tun würde, wenn Wenn Sie komplizierter werden möchten, können Sie schicker werden und jedes Mal, wenn Sie einen Artikel mit einer Überschrift finden, einen Container erstellen und ihn dem Container hinzufügen:

var sections = document.getElementsByClassName('item'); 
var currentContainer = null; 
for (var section of sections) { 
    let heading = section.getElementsByTagName('h2')[0]; 
    if (heading && heading.innerHtml) { 
     currentContainer = document.createElement('div'); 
     currentContainer.className = 'generated-section'; 
     section.parent.insertBefore(currentContainer, section); 
    } 
    section.parent.remove(section); 
    currentContainer.appendChild(section); 
} 

Diese sind beide noch nicht getestet, so dass sie möglicherweise etwas Arbeit erfordern. Die zweite nimmt auch an, dass sie in Ordnung sind, was sich so anhört.