NoReceipt4Panda NoReceipt4Panda -5 years ago 103
Javascript Question

How to get attribute for selected option ONLY within an active tab?

I have an image-picker that goes through each of my categories and outputs every title/image of every post. Each of these categories, along with all the posts are held inside of a bootstrap tab-pane. The problem is that when the image picker generates all the post images, each tab-pane, whether it's active or not, has a selected image.

I was going to go along with route of limiting only the active tab-pane to be allowed a "selected" image, where all other tab-panes have no images with class "selected", but have decided to go with another route:

I'm basically trying to locate the image that's selected (has class "selected"), ONLY if the parent-parent-parent(x3) element is selected (has class "active"). Here's an example:

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

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

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

I've found a code that gets ALL of the "src" attributes from all selected thumbnails, but how would I go about getting ONLY from the active tab?

Here was the code to get all thumbnail selected src attributes:

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

Answer Source

Is this what you are after? The jquery selector supports css selector, so no need to write div[class='...'] unless you want to match exactly a div that have just those two class names in that order

$(' div.thumbnail.selected').children('img')

Just a suggestion (You don't need to wrap each img in a jQuery wrapper)
And .map() seems like a better fit for the job

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

And you don't need to wrap req another time in $() since it's already a jquery object. So you can just write


req = $(' div.thumbnail.selected img'),
imagessource =, elm) => elm.src);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download