如何仅在活动选项卡中获取所选选项的属性？

Question

我有一个图像选择器，它遍历我的每个类别并输出每个帖子的每个标题/图像。 这些类别中的每一个以及所有帖子都保存在引导选项卡窗格中。 问题在于，当图像选择器生成所有后置图像时，每个选项卡窗格（无论是否处于活动状态）都具有选定的图像。

我将遵循只将活动选项卡窗格限制为“选定”图像的路线，其中所有其他选项卡窗格都没有类别为“ selected”的图像，但决定采用另一条路线：

我基本上是在尝试定位选定的图像（具有“选定”类），仅当选择了parent-parent-parent（x3）元素（具有“活动”类）时。 这是一个例子：

<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>

我找到了一个代码，该代码可从所有选定的缩略图中获取所有“ src”属性，但是我将如何仅从活动选项卡中获取呢？

这是获取所有缩略图选定的src属性的代码：

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

这是你所追求的吗？ jQuery选择器支持css选择器，因此无需编写div[class='...']除非您要完全匹配仅具有两个类名顺序的div

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

---

只是一个建议（您无需将每个img包装在jQuery包装器中）
.map()似乎更适合这份工作

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

而且您不需要在$()再次包装req ，因为它已经是一个jquery对象。 所以你可以写

req.map(....)

结果：

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

console.log(imagessource);