jquery - 访问一次子级，然后在 jQuery（1.9.x 及更多）中重用父级

Question

我正在寻找更好的工作来完成这项工作，我想填写点击图像的标题，我相信有更好的解决方案。

谢谢你的回答，艾伦。（法文）

jQuery是：

$bImg
  .find('.title, .caption')
    .fadeIn()
  .parent()
  .find('.title')
    .text(title)
  .parent()
  .find('.caption')
    .text(caption);

HTML 是：

<div class="big-image carousel">
   <img src="http://placehold.it/450x240/FFFFCC">
   <div class="title">ThIs PhOtO</div>
   <div class="caption">Itaque earum rerum hic in tenetur</div>
</div>

PS：$bImg = $('.big-image');

Answer 1

您可以使用.filter()和.siblings()

$bImg
  .find('.title, .caption')
    .fadeIn()
  .filter('.title') // gets .title out of the collection
    .text(title)
  .siblings('.caption')
    .text(caption);

Answer 2

$('.title, .caption', '.big-image').fadeIn().text(function() { 
    return $(this).is('.title') ? title : caption; 
});

Answer 3

一种更有效的方法是：

$bImg.find('.title').text(title).fadeIn();
$bImg.find('.caption').text(caption).fadeIn();

除非您绝对需要在一行中执行此操作，否则应该首选上述方法，因为它仅找到每个元素一次并将缓存的对象用于所有后续使用 - 与原始代码不同，它至少重新获取所有项目 2 次（ parent - 3 次，.title - 2 次和 .caption - 2 次）