在jquery中通过类选择子元素时,如何将每个直接子元素视为不同的元素?

A J • 4 年前 • 619 次点击

我有两个或两个以上的街区在同一层。在这些块中,我有一些公共元素,但是我想对每个子元素进行不同的处理。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
       let row_len = $(".parent-row>.row").length;
        $(".parent-row>.row").each(function(index, element){
          if(index < row_len) {
             element.remove();
          }
        });
      });
    });
    </script>

    <div class="parent-row">
       <div class="row">
         A
       </div>
     </div>

    <div class="parent-row">
       <div class="row">
         A
       </div>
      <div class="row">
         A
       </div> 
     </div>

    <div class="parent-row">
       <div class="row">
         A
       </div>
      <div class="row">
         A
       </div>
      <div class="row">
         A
       </div>  
     </div>
<button type="button">Reset</button>

实际上,我想删除.row元素的所有子元素,除了一个块。

我想回到:

<div class="parent-row">
   <div class="row">
     A
   </div>
 </div>

<div class="parent-row">
   <div class="row">
     A
   </div>
 </div>

<div class="parent-row">
   <div class="row">
     A
   </div>
 </div>

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/40782

619 次点击

文章 [ 5 ] | 最新文章 4 年前

• 1 楼

gaetanoM 5 年前

实际上我想删除除第一个元素之外的所有元素。

因此,您可以选择除第一个元素之外的所有元素:

$(".parent-row>.row:not(:first)")

$(document).ready(function () {
    $("button").on('click', function (e) {
      $(".parent-row>.row:not(:first)").remove();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-row">
    <div class="row">
        A
    </div>
</div>

<div class="parent-row">
    <div class="row">
        B
    </div>
</div>

<div class="parent-row">
    <div class="row">
        C
    </div>
</div>
<button type="button">Reset</button>

实际上,我想删除.row元素的所有子元素,除了一个块。

在这种情况下,您可以组合 :contains() 和 :not() 选择器:

$(".parent-row>.row:not(:contains(A))")

$(document).ready(function () {
    $("button").on('click', function (e) {
        $(".parent-row>.row:not(:contains(A))").remove();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="parent-row">
    <div class="row">
        A
    </div>
</div>

<div class="parent-row">
    <div class="row">
        A
    </div>
    <div class="row">
        B
    </div>
</div>

<div class="parent-row">
    <div class="row">
        A
    </div>
    <div class="row">
        B
    </div>
    <div class="row">
        C
    </div>
</div>
<button type="button">Reset</button>

如果,相反,你正在寻找你可能 .filter() :

$(".parent-row>.row").filter((idx, ele) => ele.textContent.trim() != 'A').remove();

$(document).ready(function () {
    $("button").on('click', function (e) {
        $(".parent-row>.row").filter((idx, ele) => ele.textContent.trim() != 'A').remove();
    });
});

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>


<div class=“父行”>
<div class=“row”>
一
&L/DIV & GT;
&L/DIV & GT;

<div class=“父行”>
<div class=“row”>
一
&L/DIV & GT;
<div class=“row”>
乙
&L/DIV & GT;
&L/DIV & GT;

<div class=“父行”>
<div class=“row”>
一
&L/DIV & GT;
<div class=“row”>
乙
&L/DIV & GT;
<div class=“row”>
C
&L/DIV & GT;
&L/DIV & GT;
<button type=“button”>重置</按钮>

• 2 楼

Sushil 5 年前

希望这是你需要的

$("button").click(function(){
        $(".parent-row>.row:not(:first)").remove();
});

或

$("button").click(function(){
 $(".parent-row>.row").each(function(index, element){
  if(index>0)
   element.remove();
 })
});

• 3 楼

jags 5 年前

$(document).ready(function(){
    $("button").click(function(){
        let row_len = $(".parent-row>.row").length;
        $(".parent-row>.row").each(function(index, element){
        if(( index < row_len ) && ( index != 0)) {
                element.remove();
            }
        });
    });
});

• 4 楼

Renzo Calla 5 年前

要删除第一行,您可以将行的内容与这样的“a”进行比较….

$(document).ready(function(){
      $("button").click(function(){
       let row_len = $(".parent-row>.row").length;
        $(".parent-row>.row").each(function(index, element){
          if($(element).html().trim() == 'A') {
             element.remove();
          }
        });
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <div class="parent-row">
       <div class="row">
         A
       </div>
     </div>

    <div class="parent-row">
       <div class="row">
         A
       </div>
      <div class="row">
         B
       </div> 
     </div>

    <div class="parent-row">
       <div class="row">
         A
       </div>
      <div class="row">
         B
       </div>
      <div class="row">
         C
       </div>  
     </div>
<button type="button">Reset</button>

• 5 楼

Shikhar Jaiswal 5 年前

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$("button").click(function(){
$(".parent-row .row:not(:first-child)").remove();

<button type="button">fire</button>
<div class="parent-row">
  <div class="row">
    A1
  </div>
</div>

<div class="parent-row">
  <div class="row">
    A1
  </div>
  <div class="row">
    A2
  </div> 
</div>

<div class="parent-row">
  <div class="row">
    A1
  </div>
  <div class="row">
    A2
  </div>
  <div class="row">
    A3
  </div>  
</div>

登录后回复