Question

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

<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篇或更多的文章时，有图片的文章将放置图片和所有文章。

Answer 1

根据您的代码，我已修复了多篇文章的问题。在获取图像并在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>

对于每个div插入。

1 个答案: