Question

我有以下内容：

$("#modal-controls").html(html)
  .find("#pic_caption").val(data.pic_caption)
  .find("#pic_desc").val(data.pic_desc);

基本上，我更改某些内容的html，搜索输入并更改其值。它改变了第一个，但没有继续改变第二个输入，我将如何使用链接正确编写它？或者我必须将它分成2个不同的jQuery对象吗？

感谢。

Answer 1

您的问题是因为第一个find()将当前链放在#pic_caption。使用end()返回上一个选择器链，例如

$("#modal-controls").html(html)
  .find("#pic_caption").val(data.pic_caption).end()
  .find("#pic_desc").val(data.pic_desc);

Answer 2

看看jQuery.fn.end()。您可以将其添加到链中以恢复到上一组匹配的元素。

$("#modal-controls").html(html)
  .find("#pic_caption").val(data.pic_caption).end() //<--
  .find("#pic_desc").val(data.pic_desc);

Answer 3

假设你的HTML结构是这样的：

<div id="modal-controls">
    <input type="button" id="pic_caption" value="">
    <input type="button" id="pic_desc" value="">
</div>

您需要使用jQuery end()（DOCS）将过滤器返回到已链接find()的原始选择器：

$("#modal-controls").html(html)
  .find("#pic_caption").val(data.pic_caption)
  .end()
  .find("#pic_desc").val(data.pic_desc);

Answer 4

你的选择器没有循环匹配，它只是击中第一个。假设您有多个模态控件，请尝试这个...

$("#modal-controls").each(function(index){
  $(this).html(html)
  .find("#pic_caption").val(data.pic_caption)
  .find("#pic_desc").val(data.pic_desc);
});

jquery正确的链接？

4 个答案: