在 Jquery 中检索复杂的嵌套值

Posted 2023-05-09

【中文标题】在 Jquery 中检索复杂的嵌套值

【英文标题】：Retrieving complicated nested values in Jquery

【发布时间】：2013-12-05 03:04:28

【问题描述】：

我有一个可以动态生成包含图像和六个输入的 li 元素的表单。生成的每一行都采用以下形式：

<li>
    <div id="ShowcaseEntry" class="IndexEntry">
        <div class="IndexImage">
            <img src="/static/graphics/no-image.png" >
        </div>
        <div class="IndexCaption">
            <label>Caption</label><br />
            En <input type="text" class="ShowcaseCaption_en" value="">
            Es <input type="text" class="ShowcaseCaption_es" value="">
            <br />
            <label>Link</label><br />
            En <input type="text" class="ShowcaseLink_en" value="">
            Es <input type="text" class="ShowcaseLink_es" value="">
            <br/>
            <a href="" class="removeimg">Remove</a></li>
        </div>
    </div>
</li>

无序列表的 ID 为 ShowcaseImages。

以前图像不在自己的分区内，提交表单时有一个 JQuery 函数收集所有图像源名称：

var galleryimagesinput = [];
$("#ShowcaseImages li img").each(function()  galleryimagesinput.push($(this).attr('src')) );

然后我可以通过表单中的单个输入值发送数组，以便在另一端进行反汇编。

但是，现在图像位于 div 中，没有收集 src。如何收集 src 以及如何收集每个 li 中每个标题和链接文本的值，将它们放入自己的数组中（一个用于图像，一个用于标题，一个用于链接文本）

我知道这可能只是链接选择器的问题，但我完全迷失了它。从文本框直接发送到表单的实际输入值并不重要，因为我希望 Jquery 将它们收集起来以放入其他隐藏输入中。

【问题讨论】：

新的html长什么样子？

【参考方案1】：

这应该可行：

$("#ShowcaseImages li").each(function()  
    galleryimagesinput.push($(this).find('img').attr('src'));
);

【讨论】：

如果li img 选择器不起作用...为什么会这样？基本一样

@charlietfl - 因为在 OP 的原始选择器中，他正在遍历列表项中的所有图像。这个选择器会迭代列表项，然后抓取每个项中的图像。

Pat 和这个都可以工作，但我已经设法调整这个来获取标题和链接文本。都修改了，谢谢。

【参考方案2】：

这应该为#ShowcaseImages ul 中的每个图像运行该函数

var galleryimagesinput = [];
$("#ShowcaseImages img").each(function()  
  galleryimagesinput.push($(this).attr('src')) 
);

我刚刚从您的原始函数中删除了“li”。