jQuery nth-child 删除

Posted 2023-05-09

【中文标题】jQuery nth-child 删除

【英文标题】：Jquery nth-child removal

【发布时间】：2017-08-11 23:51:59

【问题描述】：

我有 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($('.trim'), 1, css:height: secondimgheight+'px');

【问题讨论】：

调查事件委派，jQuery无法看到添加的元素。 span> 这只是为了说明的目的 - 有一个容器。这更像是关于jQuery如何在删除后处理nth-child的问题。 span>

问题是您的代码确实删除了第一张图片，但第一张图片不是您想要的特定图片吗？

“它不起作用” - 它有什么作用？你怎么称呼它？这里的一些 cmets 建议使用事件处理程序，但您没有提到您的代码是从单击事件或类似事件中调用的，那么您如何/何时调用第二次删除？ .hero .trim 相对于其他 3 张图像在哪里。与同一容器中的其他3个图像是吗？如果您提供更多上下文会更容易。

我不确定使用您的代码是否有任何问题。您可能还有其他问题使其无法正常工作。查看工作示例：jsfiddle.net/r81fqe4m

【参考方案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>

【参考方案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 上，最后新的第一个元素被删除。

【参考方案3】：

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

要删除第 n 个图像：

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

先添加新的img：

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

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