Question

我有一些HTML（我无法控制）来自数据库，它包含大量文本和图像。我需要在其中包含<a>标记的第一个<img>代码之前或之后插入特定元素。

以下是HTML的示例：

<section class="main">
<p>Nokia 8 4GB RAM 64GB Dual Sim Phone</p>
<p>The Nokia 8 undergoes a rigorous 40-stage process of machining, anodizing and polishing to ensure its distinctive design pairs flawlessly with the polished aluminium unibody.</p>
<p>The ultimate in seamless unibody construction, Nokia 8 is designed to nestle perfectly in the palm of your hand.</p>
<a href="https://www.nokia.com">
<img src="https://cdn2.gsmarena.com/vv/bigpic/nokia-8-.jpg" />
</a>
<p>We offer 14 days money back guarantee in case of a change of mind. </p>
</section>
<div class="movethisdiv">I want to move this content</div>

这是我可以在div元素之前移动img，但显然它永远不会工作，因为img包含在锚标记中。那么我如何让jQuery在第一个有内部图像的锚元素之前插入div？

$(".movethisdiv").insertBefore( $("section.main").find("a > img").first());

以上内容仅会在div标记之前插入img，但会在a元素中插入a。我希望它在-P元素之前插入。

Answer 1

使用.first()和.parent()方法就是示例

$("a").find('img').first($(".movethisdiv").insertBefore($("section.main > a img:first").parent()));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main">
<p>Nokia 8 4GB RAM 64GB Dual Sim Phone</p>
<p>The Nokia 8 undergoes a rigorous 40-stage process of machining, anodizing and polishing to ensure its distinctive design pairs flawlessly with the polished aluminium unibody.</p>
<p>The ultimate in seamless unibody construction, Nokia 8 is designed to nestle perfectly in the palm of your hand.</p>
<a href="https://www.nokia.com">
<img src="https://cdn2.gsmarena.com/vv/bigpic/nokia-8-.jpg" />
</a>
<p>We offer 14 days money back guarantee in case of a change of mind. </p>
</section>
<div class="movethisdiv">I want to move this content</div>

Answer 2

在.parent()之后添加.first()，如下所示：$(".movethisdiv").insertBefore( $("section.main").find("a > img").first().parent());

Answer 3

您可以使用过滤器：

＆＃13;

$('.movethisdiv').insertBefore(
  $("section.main").find('a').filter(function() { // get all anchors in main
    return $(this).children('img').length;        // filter out anchors with an image
  }).first());                                    // get the first one

＆＃13;

.movethisdiv {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main">
  <p>Nokia 8 4GB RAM 64GB Dual Sim Phone</p>
  <a href="#">a test link</a>
  <p>The Nokia 8 undergoes a rigorous 40-stage process of machining, anodizing and polishing to ensure its distinctive design pairs flawlessly with the polished aluminium unibody.</p>
  <p>The ultimate in seamless unibody construction, Nokia 8 is designed to nestle perfectly in the palm of your hand.</p>
  <a href="https://www.nokia.com">
    <img src="https://cdn2.gsmarena.com/vv/bigpic/nokia-8-.jpg" />
  </a>
  <p>We offer 14 days money back guarantee in case of a change of mind. </p>
</section>
<div class="movethisdiv">I want to move this content</div>

＆＃13;

Answer 4

你可以这样做。

找到img内的所有a，选择第一个，然后选择它的父级。

然后在该父

之前插入div

let  firstAnchor = $("a img").first().parent()


$(".movethisdiv").insertBefore(firstAnchor)

.movethisdiv {
color:red;
font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="main">
  <p>Nokia 8 4GB RAM 64GB Dual Sim Phone</p>
  <p>The Nokia 8 undergoes a rigorous 40-stage process of machining, anodizing and polishing to ensure its distinctive design pairs flawlessly with the polished aluminium unibody.</p>
  <p>The ultimate in seamless unibody construction, Nokia 8 is designed to nestle perfectly in the palm of your hand.</p>
  <a href="https://www.nokia.com">
<img src="https://cdn2.gsmarena.com/vv/bigpic/nokia-8-.jpg" />
</a>
  <p>We offer 14 days money back guarantee in case of a change of mind. </p>
  <a href="https://www.nokia.com">
<img src="https://cdn2.gsmarena.com/vv/bigpic/nokia-8-.jpg" />
</a>
  <a href="https://www.nokia.com">
<img src="https://cdn2.gsmarena.com/vv/bigpic/nokia-8-.jpg" />
</a>
  <a href="https://www.nokia.com">
<img src="https://cdn2.gsmarena.com/vv/bigpic/nokia-8-.jpg" />
</a>
</section>
<div class="movethisdiv">I want to move this content</div>

如何在其中包含特定元素的第一个元素之后插入或插入？

4 个答案: