时间戳

首页 > 解决方案 > 对于每个 div insert.before 图像

javascript - 对于每个 div insert.before 图像

问题描述

我在一个页面上生成了几篇文章。我必须将图片插入到右侧文章上方的文本中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont">
    <div>
        <h2>Heading 1</h2>
        <div class="image  cf-img-right-small ">
            <div  class="cmp-image">
                <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="images"  alt="">
            </div>
        </div>
        <p><b>Lorem Ipsum</b>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
            the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum</p>
        <div>
           
        </div>
    </div>
</div>

    <div class="cont">
    <div>
        <h2>Heading 2</h2>
        <div class="image  cf-img-right-small ">
            <div  class="cmp-image">
                <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="image"  alt="">
            </div>
        </div>
        <p><b>Lorem Ipsum</b>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
            the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum</p>
        <div>
           
        </div>
    </div>
</div>

<script>
    $('.cont').each(function () {
    var $this = $(this);
    
    count = $('.cont', this).children().length;
    console.log(count)
    if ((count < 2) && ( $( ".cf-img-right-small" ).length )) {

        $( ".image:first-child" ).insertBefore($( ".cont p" ) );   
    
    } 
});
</script>

我的问题是当我有 2 篇或更多文章时，带有图片的文章会放置图片和所有文章。

标签： javascriptjquery

解决方案

根据您的代码，我已经解决了多篇文章的问题。在获取图像并在 p 之前插入时，您缺少当前的 .cont 元素引用。

这里的课程也是$( ".image:first-child" )错误的。正确的班级是.images。

$('.cont').each(function() {
  var $this = $(this);
  if ($this.find(".cf-img-right-small").length) {
    $this.find(".images:first-child").insertBefore($this.find("p"));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont">
  <div>
    <h2>Heading 1</h2>
    <div class="image  cf-img-right-small ">
      <div class="cmp-image">
        <img src="https://picsum.photos/200/300" class="images" alt="">
      </div>
    </div>
    <p><b>Lorem Ipsum</b>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    <div>

    </div>
  </div>
</div>
<div class="cont">
  <div>
    <h2>Heading 1</h2>
    <div class="image  cf-img-right-small ">
      <div class="cmp-image">
        <img src="https://picsum.photos/200/300?121" class="images" alt="">
      </div>
    </div>
    <p><b>Lorem Ipsum</b>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    <div>

    </div>
  </div>
</div>

推荐阅读