Wie erhält man das Attribut für ausgewählte Option NUR innerhalb einer aktiven Registerkarte?

Question

Ich habe einen Bild-Picker, der jede meiner Kategorien durchläuft und jeden Titel/Bild von jedem Beitrag ausgibt. Jede dieser Kategorien wird zusammen mit allen Posts in einem Bootstrap-Registerkartenbereich gespeichert. Das Problem besteht darin, dass wenn der Bilderwähler alle Post-Bilder erzeugt, jeder Tab-Bereich, ob er aktiv ist oder nicht, ein ausgewähltes Bild hat.

Ich ging mit der Route der Begrenzung nur die aktive Registerkarte-Bereich zu einem "ausgewählten" Bild erlaubt, wo alle anderen Registerkarten keine Bilder mit der Klasse "ausgewählt" haben, aber entschieden haben, mit zu gehen eine andere Route:

Ich versuche grundsätzlich, das ausgewählte Bild zu lokalisieren (hat Klasse "ausgewählt"), NUR, wenn das Eltern-Eltern-Eltern (x3) Element ausgewählt ist (hat Klasse "Aktiv"). Hier ein Beispiel:

<div class="tab-pane active" id="someID1"> 
    <ul class="thumbnails image_picker_selector"> 
     <li> 
      <div class="thumbnail selected"> 
       <img class="image_picker_image" src="something.jpg"> 
      </div> 
     </li> 
     ... <!-- More list options --> 
    </ul> 
</div> 

<div class="tab-pane" id="someID2"> 
    <!-- This tab also has one div with classes "thumbnail selected" --> 
</div> 

<div class="tab-pane" id="someID3"> 
    <!-- This tab also has one div with classes "thumbnail selected" --> 
</div> 

Ich habe einen Code gefunden, dass alle des „src“ Attribute von allen ausgewählten Thumbnails wird, aber wie würde ich mich über nur aus dem aktiven Tab zu bekommen?

war hier der Code alle Miniaturansichten ausgewählt src zu bekommen Attribute:

var req = $("div[class='thumbnail selected']").children('img'); 
var imagessource = []; 
$(req).each(function (datakey, datavalue) { 
    src = $(datavalue).attr('src'); 
    imagessource.push(src); 
}); 
console.log(imagessource); 

Answer 1

Ist das, was Sie nach? Die jQuery-Selektor unterstützt CSS-Selektor, so dass keine Notwendigkeit div[class='...'] zu schreiben, wenn Sie genau ein div übereinstimmen soll, die

$('.tab-pane.active div.thumbnail.selected').children('img') 

---

nur ein Vorschlag in dieser Reihenfolge nur diese beiden Klassennamen haben (Sie brauchen nicht jedes img in einem jQuery-Wrapper wickeln)
Und .map() wie eine bessere Passform für den Job

var imagessource = $(req).map((idx, elm) => elm.src) 

Und Sie brauchen sich nicht wickeln req ein anderes Mal inscheint 210 da es bereits ein jquery-Objekt ist. So können Sie einfach schreiben

req.map(....) 

Ergebnis:

var 
req = $('.tab-pane.active div.thumbnail.selected img'), 
imagessource = req.map((idx, elm) => elm.src); 

console.log(imagessource);