javascript - 如何仅在事件选项卡中获取所选选项的属性？

Question

我有一个图像选择器，可以遍历我的每个类别并输出每个帖子的每个标题/图像。每个类别以及所有帖子都保存在引导选项卡 Pane 中。问题是，当图像选择器生成所有帖子图像时，每个选项卡 Pane (无论其是否处于事件状态)都有一个选定的图像。

我打算遵循仅限制事件选项卡 Pane 允许“选定”图像的路线，其中所有其他选项卡 Pane 没有“选定”类的图像，但决定使用另一个路线:

我基本上试图找到所选的图像(具有“selected”类)，仅当选择了“parent-parent-parent(x3)”元素(具有“active”类)时。这是一个例子:

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