我知道这是一个简单的解决方法,但我找不到正确的方法.请帮忙!

我有这样的HTML struct

<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
</div>

现在我想在grand-child1 <span>的前两个<main> div中添加<img>.

如果我使用以下jQuery <img>,则在所有<main>个div中出现两次

$("img").appendTo(".grand-child1");

所以,我使用了这样的每个函数.但对我来说什么都不管用.

$(".main img").each(function () {
    jQuery(this).find('img').appendTo(this).closest(".grand-child1");
});

推荐答案

第二个例子中的逻辑基本上是正确的,但并不完全正确.this关键字已经引用了img元素,所以没有必要对其进行find().此外,.child1元素是img的同级元素,因此可以使用siblings()而不是closest()(用于查找父元素).最后,.child1元素需要作为appendTo()的参数提供.

请try 以下示例:

$(".main img").each(function() {
  $(this).appendTo($(this).siblings(".child1"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="main">
  <span class="child1">some content</span>
  <span class="child2">some content</span>
  <img src="image.jpg" />
</div>
<div class="main">
  <span class="child1">some content</span>
  <span class="child2">some content</span>
  <img src="image.jpg" />
</div>
<div class="main">
  <span class="child1">some content</span>
  <span class="child2">some content</span>
</div>

Update:

考虑到问题中的新HTML,您只需要修改DOM遍历逻辑.使用prev()find()代替siblings():

$(".main img").each(function() {
  $(this).appendTo($(this).prev('.parent').find(".grand-child1"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
  <img src="image.jpg" />
</div>
<div class="main">
  <div class="parent">
    <div class="child1">some content</div>
    <div class="child2"><span class="grand-child1">some content</span></div>
  </div>
</div>

Jquery相关问答推荐

jQuery在localStorage时将类添加到正文

从文本区域获取值

确定元素是否是其父元素的最后一个子元素

如何获取将在不提交的情况下提交的所有表单值

jQuery 动画滚动

如何使用 jQuery 将分钟转换为小时/分钟并添加各种时间值?

以ajax方式在rails 3中提交表单(使用jQuery)

jQuery 判断 是否存在并且有一个值

你如何获得文本区域中的光标位置?

Codemirror 编辑器在单击之前不会加载内容

JQuery html() 与 innerHTML

如何触发href元素的点击事件

jQuery:获取父母,父母ID?

测试空 jQuery Select 结果

消除移动 Safari 中点击事件的 300 毫秒延迟

如何在页面加载时启动 jQuery Fancybox?

如何使用 jQuery 检测 IE 8?

jquery - 从一个非常大的表中删除所有行的最快方法

jQuery clone() 不克隆事件绑定,即使使用 on()

catch forEach 最后一次迭代