2017-02-08 1 views
1

Bei der Arbeit mit einem Code-Chunk wie dem folgenden versuche ich, einen eindeutigen Klassennamen zu jeder Instanz der Klasse "duplicated-class" hinzuzufügen, die sich auf demselben Element befindet die Klasse "Affiliate-Logo".Identifizieren Sie doppelte Klassen in separaten geschachtelten Gruppen

Wichtige Hinweise:

  1. "dupliziert-Klasse" steht für eine dynamische Variable, dass alles, was sein könnte.
  2. Das gewünschte Ergebnis ist die duplizierten Klassen mit einer Ziffer ('.class--1' ,' .class--2' ,‘.class--3' , etc ....

Hier ist anzuhängen ein Beispiel der Code-Struktur:

<div id="integrations"> 
<div class="post-item" data-name="name"> 
    <div class="rss-card" style=""> 
     <div class="hs-rss-item"> 
      <div class="rss-item-banner"> 
       <img class="hs-rss-featured-image" src="" alt=""> 
       <div class="affiliate-logo duplicate-class"><img src="" alt=""></div> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="post-item" data-name="name"> 
    <div class="rss-card" style=""> 
     <div class="hs-rss-item"> 
      <div class="rss-item-banner"> 
       <img class="hs-rss-featured-image" src="" alt=""> 
       <div class="affiliate-logo duplicate-class"><img src="" alt=""></div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="post-item" data-name="name"> 
    <div class="rss-card" style=""> 
     <div class="hs-rss-item"> 
      <div class="rss-item-banner"> 
       <img class="hs-rss-featured-image" src="" alt=""> 
       <div class="affiliate-logo different-class"><img src="" alt=""></div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

die post-item Gruppe aus einem COS-Eintrag mit der ‚Duplikat-Klasse‘ erzeugt wird gezogen von dem {{namen}} Wert, der für doppelte Werteinträge zulassen muss

.

Während ich Methoden zum Erstellen von Klassenlisten für direkte finden kann Nachkommen der Wrapping-ID, ich kann scheinbar nichts finden (oder herausfinden), das das Ergebnis der Suche nach der "Duplicate-Klasse" erzeugt, während es tiefer in der erzeugten Struktur verschachtelt ist.

Meine ersten Gedanken sind:

  1. Identifizieren Sie die post-item Gruppen
  2. Finden Sie die '.affiliate-Logo' Klasse innerhalb jeder Gruppe post-item
  3. Identifizieren Sie die zweite Klasse neben‘.affiliate-Logo '(in diesem Beispiel: .duplicate-class) und weisen Sie es einer Variablen zu (var = adjacentClass) < - hier geht es mir bei der Durchführung dieser Prüfung verloren.
  4. Überprüfen Sie, ob (beachedClass) mit anderen (beachedClass) aus anderen post-item Gruppen übereinstimmt.
  5. Verwenden Zähler als eindeutige Kennung zusätzlich (var i = i)
  6. if(adjacentClass === adjacentClass){ $(".duplicate-class').replaceClass('adjacentClass' + i) } else {}

zu handeln (ich würde in Javascript tatsächlich versuchen, diese Logik schreiben, wenn ich Schritt 3 herausfinden kann)

Beliebig Hilfe, die für dieses Problem angeboten werden kann, wäre sehr willkommen.


Artikel Ich habe eine Lösung zu finden, bei dem Versuch verwiesen:

How find nested div with same class name in jquery?

How do I access the list of classnames using javascript/jQuery?

jquery select class inside parent div

Target the 2nd instance of a CSS Class

** Bearbeitet Terminologie Konflikt

+0

Entschuldigung, lassen Sie mich ein wenig verdeutlichen: Ich würde gerne in der Lage sein, die 'Duplicate-Klasse' Elemente zu finden und dann einen eindeutigen Wert zu dieser Klasse hinzuzufügen (d. H. die erste 'duplicate-class' wird zu 'duplicate-class-1', die zweite zu 'duplicate-class-2'. –

+0

Haben Sie die Geschwister von jquery() angeschaut? Das kann mit einem Selektor gemacht werden, so dass Sie einfach irgendein Geschwister des gegebenen Knotens mit der gewählten Klasse bekommen können. – Snowmonkey

+0

Ich habe über Geschwister() nachgedacht, aber ich kann nicht herausfinden, wie man die Elemente findet, die die gleiche Klasse von einer getrennten geschachtelten Gruppe haben würden. dh finden Sie alle '.affiliate-group.name-a' Combos auf der Seite und ändern Sie dann nur die '.name-a' Klassen als eindeutige Klassen ('.name-a-1, .name-a -2, etc ... ') –

Antwort

0

UPDATE 2

In Snippet zu beheben 2 wir .each() zweimal verwendet haben. Einmal iteriert man alle div.affiliate-logo und einmal für die zweite Klasse jeweils div.affiliate-logo. Eine for Schleife filtert Dubletten aus, die in einem Array gespeichert sind. Der schwierigste Teil war, was OP hatte Schwierigkeiten mit der zweiten Klasse zu bekommen. Dies ist, wie:

$(this).prop('classList'); 

Im Klar JavaScript, classList eine Eigenschaft ist, wenn es ohne .add, .remove verwendet wird, usw. Es wird eine Reihe von Klassennamen (in den Kommentaren der Snippet 2 zurückkehren, jeder Verweis auf eine Zeichenfolge in diesem Array wird "ClassString").

Überprüfen Sie Snippet 2 im Ganzseitenmodus. Einzelheiten sind in Snippet kommentieren 2.

UPDATE 1

die erste 'Duplikat-Klasse' wird 'Duplikat-Klasse-1', die zweite 'Duplikat-Klasse-2'

wird

Nicht sicher, was Sie versuchen zu tun. Ich denke, Sie denken, dass Klassen wie DOM-Objekte sind, wie Elemente sind. Überprüfen Sie das Snippet und lassen Sie mich wissen, ob Sie das wollten oder nicht.

SNIPPET 1

$('.duplicate-class').each(function(idx, obj) { 
 
    var unique = 'duplicate-class' + (idx + 1); 
 
    $(this).addClass(unique) 
 
    $(this).text('this is ' + unique); //This is just to show it works 
 
});
div { 
 
    border: 1px solid black; 
 
    height: 40px; 
 
    width: 200px; 
 
    padding: 10px; 
 
    color: white; 
 
    background: rgba(0, 0, 0, .3); 
 
} 
 
.affiliate-logo { 
 
    border: 2px dashed red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="integrations"> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo duplicate-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo duplicate-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo different-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

SNIPPET 2

// .each() .affiliate-logo do this... 
 
$('.affiliate-logo').each(function(idx, obj) { 
 

 
    /* Get the classList .prop()erty and store it 
 
    || in a var called list. list is now an array 
 
    || of classes that belong to this particular 
 
    || .affiliate-logo. 
 
    */ 
 
    var list = $(this).prop('classList'); 
 

 
    // Store the second classString in a var called second 
 
    var second = list[1]; 
 

 
    /* Create an array with the classString of 'affiliate- 
 
    || logo' because we already know that it will be a 
 
    || duplicate. Call this array dupes. 
 
    */ 
 
    var dupes = ['affiliate-logo']; 
 

 
    /* for every classString that's in dupes array 
 
    || compare it to the value of second. If there's 
 
    || a match bust out of this loop and go on to the 
 
    || next .affiliate-logo. 
 
    */ 
 
    for (let a = 0; a < dupes.length; a++) { 
 
    if (second === dupes[a]) { 
 
     return; 
 
    } 
 
    } 
 

 
    /* Since there were no matches, we continue. 
 
    || Push second in the dupes array so if ever found 
 
    || again, second will be rejected by the previous 
 
    || for loop. 
 
    */ 
 
    dupes.push(second); 
 

 
    /* Concat second with a dot so it'll pass as a class 
 
    || selector then store it in a var called klass. 
 
    */ 
 
    var klass = '.' + second; 
 

 
    // each() klass will... 
 
    $(klass).each(function(index, item) { 
 

 
    /* concat second + (current)index as a string 
 
    || then addClass() that string to the current 
 
    || div.affiliate-logo.{{klass}} 
 
    */ 
 
    $(item).addClass(second + index); 
 

 
    /* insert text that shows it's new class. The 
 
    || new unique class can be verified by F12. 
 
    */ 
 
    $(item).text('This is ' + second + index); 
 
    }); 
 

 
});
div { 
 
    border: 1px solid black; 
 
    height: 40px; 
 
    width: 200px; 
 
    padding: 10px; 
 
    color: white; 
 
    background: rgba(0, 0, 0, .3); 
 
} 
 
.affiliate-logo { 
 
    border: 2px dashed red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="integrations"> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo duplicate-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo duplicate-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo different-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo o-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo x-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo klass-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo a-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo dupe-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo bass-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo wrong-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo no-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo no-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo x-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo logo-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo long-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo x-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo duplicate-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo x-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo no-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="post-item" data-name="name"> 
 
    <div class="rss-card" style=""> 
 
     <div class="hs-rss-item"> 
 
     <div class="rss-item-banner"> 
 
      <img class="hs-rss-featured-image" src="" alt=""> 
 
      <div class="affiliate-logo no-class"> 
 
      <img src="" alt=""> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Verwandte Themen