Question

我有3张图片

<img>
<img>
<img>

删除图片时

 $('img:nth-child(1)').remove();

然后添加另一个。

$( '.hero .trim').append($img);

然后再尝试删除第一个

 $('img:nth-child(1)').remove();

它不起作用。如何使这个工作，以便新图像是第一个孩子？

编辑完整代码......

function completeIt () {
  $('.hero .trim img:nth-child(1)').remove();
};

if(this.talentClick == false) {

//$('.hero .trim img').append('<img>').attr('src', '/img/headers/'+deptname+'-header-mobile.jpg').attr('data-mobile', '/img/headers/'+deptname+'-header-mobile.jpg').attr('data-tablet', '/img/headers/'+deptname+'-header-tablet.jpg').attr('data-desktop', '/img/headers/'+deptname+'-header.jpg')




let img = '';
let width= $(document).width();



var $img = $('<img />').attr('src', '/img/headers/'+deptname+'-header.jpg').attr('data-mobile', '/img/headers/'+deptname+'-header-mobile.jpg').attr('data-tablet', '/img/headers/'+deptname+'-header-tablet.jpg').attr('data-desktop', '/img/headers/'+deptname+'-header.jpg')

$( '.hero .trim').append($img);


let firstimgheight = $('.hero .trim img:nth-child(1)').height();
let secondimgheight = $('.hero .trim img:nth-child(2)').height();


console.log($('.hero .trim img:nth-child(1)') );

 tl.to( $('.hero .trim img:nth-child(1)'), 0.2, {css:{marginTop: -firstimgheight+"px"}})

.to（$（＆＃39; .trim＆＃39;），1，{css：{height：secondimgheight +＆＃39; px＆＃39;}}）;

Answer 1

如果您希望新图像成为第一个子图像，则需要使用prepend而不是append（单击第一个按钮以删除第一个图像并添加新图像，然后单击第二个图像按钮删除新添加的图像）：

$(function() {
  var $img = '<img src="http://placehold.it/250x250/000/fff" />';
  $('button.one').click(function() {
    $('img:nth-child(1)').remove();
    $('.hero .trim').prepend($img);
  });
  $('button.two').click(function() {
    $('img:nth-child(1)').remove();
  });
});

button {
display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="one">Button 1</button>
<button class="two">Button 2</button>
<div class="hero">
  <div class="trim">
    <img src="http://placehold.it/250x250/fff/ccc" />
    <img src="http://placehold.it/250x250/ccc/aaa" />
    <img src="http://placehold.it/250x250/eee/ccc" />
  </div>
</div>

Answer 2

有关使用您的代码的示例，请参阅https://jsbin.com/fixelobeno/edit?html,output。

  <div class="x">
    <img class="1">
    <img class="2">
    <img class="3">
  </div>

  <script>
  $('img:nth-child(1)').remove();
  $( '.x').append("<img class='new'>");
  $('img:nth-child(1)').remove();
  </script>

删除第一个子项，然后将新标记附加到div，最后删除新的第一项。

Answer 3

为简单起见，我们假设这些图像的父div具有id“main”。您需要使用insertBefore而不是append。例如：

删除第n个img：

$("#main img:nth-child(1)").remove();

首先添加新的img：

$("<img src='' />").insertBefore("#main img:nth-child(1)");

append将项目添加到子标记的最后位置。 insertBefore会将其添加到您指定添加的位置。

Jquery nth-child删除

3 个答案: