选择每个不同类的第一个兄弟答案

【问题标题】：Select the first sibling of each different classes选择每个不同类的第一个兄弟
【发布时间】：2018-11-27 07:36:57
【问题描述】：

$('.editbtn3').click(function() {
  var edit = $(this).text().trim() == 'Edit';
  $(this).html($(this).text().trim() == 'Edit' ? 'Save' : 'Edit');
  var $rows = $("tr.set" + $(this).data("set"));

  $rows.each(function() {
    var index = $(this).index();
if(index==0)
{

  var tdSet = $(this).find($("td").not('td:first-child').not('td:nth-child(2)').not('td:nth-child(3)').not(':last-child'));
}
else

  var tdSet=$(this).find($("td"));




    tdSet.each(function() {
      if (edit) {
        $(this).prop('contenteditable', true).css({
          'background': '#fff',
          'color': '#000'
        })
      } else {
        $(this).prop('contenteditable', false).removeAttr("style");
      }

    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table0 table2 table-striped table-dark table-bordered" id="myTable">
            <thead>
               <tr>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" colspan="5">S.N</th>
                  <th scope="col" colspan="5">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
     
               </tr>
                 <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                  <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                  <th scope="col">S.N</th>
               </tr>

            </thead>
            <tbody>

                <tr class="set0">
                  <td>0</td>
                  <td>20</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21
                  </td>
                  <td>  <button type="button" data-set="0" class="btn btn-primary editbtn3">
                     Edit
                     </button>
                   
                  </td>
               </tr>
               
               <tr class="set1">
                  <td rowspan="2">1</td>
                  <td rowspan="2">20</td>
                  <td rowspan="2">21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td  rowspan="2">21st August</td>
                  <td  rowspan="2">21</td>
                  <td  rowspan="2">21st August</td>
                  <td  rowspan="2">21</td>
                  <td  rowspan="2">21st August</td>
                  <td rowspan="2">21</td>
                  <td rowspan="2">21
                  </td>
                  <td rowspan="2" >  <button type="button" data-set="1" class="btn btn-primary editbtn3">
                     Edit
                     </button>
                   
                  </td>
               </tr>
               <tr class="set1">

                
                                       <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>

                 
               </tr>
           
             
               
                        <tr class="set2">
                  <td rowspan="3">2</td>
                  <td rowspan="3">20</td>
                  <td rowspan="3">21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td  rowspan="3">21st August</td>
                  <td  rowspan="3">21</td>
                  <td  rowspan="3">21st August</td>
                  <td  rowspan="3">21</td>
                  <td  rowspan="3">21st August</td>
                  <td rowspan="3">21</td>
                  <td rowspan="3">21
                  </td>
                  <td rowspan="3" >  <button type="button" data-set="2" class="btn btn-primary editbtn3">
                     Edit
                     </button>
                   
                  </td>
               </tr>
               <tr class="set2">
               
                
                                       <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>

                 
               </tr>
               <tr class="set2">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr>
               <!--     <tr class="set2">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr> -->
               
                        <tr class="set3">
                  <td rowspan="4">3</td>
                  <td rowspan="4">20</td>
                  <td rowspan="4">21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td  rowspan="4">21st August</td>
                  <td  rowspan="4">21</td>
                  <td  rowspan="4">21st August</td>
                  <td  rowspan="4">21</td>
                  <td  rowspan="4">21st August</td>
                  <td rowspan="4">21</td>
                  <td rowspan="4">21
                  </td>
                  <td rowspan="4" >  <button type="button" data-set="3" class="btn btn-primary editbtn3">
                     Edit
                     </button>
                   
                  </td>
               </tr>
               <tr class="set3">
               
                
                                       <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>

                 
               </tr>
               <tr class="set3">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr>
                   <tr class="set3">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr>
               
               
            </tbody>
         </table>
      </div>

我在这里想要实现的是，当我们点击编辑按钮时，第一、第二和第三列数据和最后一个字段数据应该是不可编辑的，但这里发生的是第一行，所需的字段是可编辑的，但是在单击第二行和第三行的编辑按钮时，其他所有内容都是可编辑的。我试图选择具有不同类的 tr 的第一个同级并使它们的第一、第二、第三和最后一个字段数据不可编辑。问题可能是由于错误的选择。有什么方法可以在不使用类的情况下做到这一点？这是我的代码 sn-p

【问题讨论】：

你可以试试：jQuery的eq()选择器，$(this).closest("tr").eq(0)
对不起，当我添加 eq() 时，每一行都变得不可编辑

标签： javascript jquery jquery-selectors

【解决方案1】：

使用 var tdSet 检查 DOM 选择以获取奇数行和偶数行。

使用下面的代码 sn-p。

$('.edit').click(function() {
  var edit = $(this).text().trim() == 'Edit';
  $(this).html($(this).text().trim() == 'Edit' ? 'Save' : 'Edit');
  var $rows = $("tr.set" + $(this).data("set"));
  $rows.each(function() {
    var index = $(this).index();
    var tdSet = $(this).find($("td")).not(':first').not('td:eq(0)').not(':last');
    if (index % 2) {
      tdSet = $(this).find($("td")).not('td:eq(0)');
    }

    tdSet.each(function() {
      if (edit) {
        $(this).prop('contenteditable', true).css({
          'background': '#fff',
          'color': '#000'
        })
      } else {
        $(this).prop('contenteditable', false).removeAttr("style");
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<table class="table table0  table-striped table-dark table-bordered" id="myTable">
  <thead>
    <tr>
      <th scope="col">abc</th>
      <th scope="col">cde</th>
      <th scope="col">fgh</th>
      <th scope="col">fgh</th>
      <th scope="col">fgh</th>
      <th scope="col">fgh</th>
    </tr>

  </thead>
  <tbody>
    <tr class="set1">
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td>abc</td>
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td rowspan="2"> 
        <button type="button" data-set="1" class="btn btn-primary edit">
          Edit
        </button>
      </td>
    </tr>
    <tr class="set1">
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr class="set2">
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td>abc</td>
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td rowspan="2">
        <button type="button" data-set="2" class="btn btn-primary edit">
          Edit
        </button>
      </td>
    </tr>
    <tr class="set2">
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>

  </tbody>
</table>

【讨论】：

我认为你错了。我不想只编辑第二行。让我让你清楚，我想通过单击按钮编辑除第一列、第二列和最后一列之外的行的每个元素该行的。
@samanaghimire 相应地更新了逻辑。看一看。谢谢。
抱歉打断，但我遇到了问题。上面的代码对于 2 行工作得非常好，但在我的情况下，可能有两、三或四行，我不知道如何处理所有行具有不同的行跨度。我将更新您的评论代码。谢谢