Question

我知道这可能有点笨拙，但我真的很想处理以下问题之类的简单事情。这是我的代码示例。问题将在代码后解释。所以这就是：

<div class="wrapper">
    <div class="image">
        <div class="columns">
            <div class="image_item">
                <img src="someSource">
            </div>
            <div class="image_item">
                <img src="someSource">
            </div>
        </div>
    </div>
    <div class="image">
        <div class="columns">
            <div class="image_item">
                <img src="someSource">
            </div>
            <div class="image_item">
                <img src="someSource">
            </div>
            <div class="image_item">
                <img src="someSource">
            </div>
        </div>
    </div>
</div>

我想做的是保持每个div的每个第一项（image_item）与班级＆＃34;图像＆＃34;并删除其余的。知道如何实现吗？到目前为止，我得到了这个，但它删除了所有接受第一个div上的第一个。

$('.first_only .immo_image').not(':first').remove();

我还尝试使用以下代码遍历每个元素：

$('. image').each(function () {
   $('.image_item').not(':first').remove();
});

但它与其他例子的情况相同。除去第一个div上的第一个图像外，它会删除所有内容。

有什么想法吗？

祝你好运

Answer 1

对于您的特定文档树，这应该有效：

$('.image').each(function () {
   $(this).find('.image-item').slice(1).remove();
});

对于每个.image，找到其中的所有.image-item并删除除第一个之外的所有内容（按文档顺序排列）。

Answer 2

您可以使用$(this).find(".image_item:not(:first)").remove();删除除第一张图片以外的所有内容。

＆＃13;

$(".image").each(function() {
  $(this).find(".image_item:not(:first)").remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="image">
    <div class="columns">
      <div class="image_item">
        <img src="someSource">
      </div>
      <div class="image_item">
        <img src="someSource">
      </div>
    </div>
  </div>
  <div class="image">
    <div class="columns">
      <div class="image_item">
        <img src="someSource">
      </div>
      <div class="image_item">
        <img src="someSource">
      </div>
      <div class="image_item">
        <img src="someSource">
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

无需显式循环.image元素。您可以使用包含:nth-child选择器（用:not否定）的单个选择器来remove()您需要的所有元素。像这样：

$('.image .image_item:not(:nth-child(1))').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="image">
    <div class="columns">
      <div class="image_item">
        <img src="someSource"> 1-1
      </div>
      <div class="image_item">
        <img src="someSource"> 1-2
      </div>
    </div>
  </div>
  <div class="image">
    <div class="columns">
      <div class="image_item">
        <img src="someSource"> 2-1
      </div>
      <div class="image_item">
        <img src="someSource"> 2-2
      </div>
      <div class="image_item">
        <img src="someSource"> 2-3
      </div>
    </div>
  </div>
</div>

JQuery遍历多个项目并删除每个项目的第一个子项

3 个答案: