找到下一个td类并将类添加到当前td

时间:2017-11-23 14:19:29

标签: javascript jquery html-table

您好我想找到下一个 td 类,并根据我必须在当前的 td 中添加一个类。

我有一张像

这样的表格
<table>
 <tr>  
  <td class="parent-test-cls next-parent-cls"><div><span> Test 1 </span> </div></td>
  <td class="parent-test-cls"><div><span> Test 1 </span></div></td>
  <td class="parent-test1-cls next-parent-test1-cls"><div><span> Test 1 </span></div></td>
  <td class="parent-test1-cls"><div><span> Test 1 </span></div></td>
  <td class="parent-test-cls"><div><span> Test 1 </span></div></td>
 </tr>
</table>

我试过的是

var $this_elt = elt.parent().next('td');
    if($this_elt.hasClass('parent-test-cls')){

        elt.parent().addClass('next-test-cls');

    }else if($this_elt.hasClass('parent-test1-cls')){

        elt.parent().addClass('next-test1-cls');

    }

但我不能添加课程,我错了?

1 个答案:

答案 0 :(得分:0)

我的理解是你的问题是,如果你选择一个div而且它的父母的下一个有'parent-test-cls',那么所选div的父母将被添加一个'next-test-cls'类。我希望以下内容能为您提供帮助。

<!DOCTYPE html>
 <html lang="en">
 <head>
    <style media="screen">
      .parent-test-cls {
        font-size: 16px;
        font-weight: bold;
      }
      .next-parent-cls {
        color: purple;
      }
      .parent-test1-cls {
        font-size: 18px;
        font-weight: 25px;
      }
      .next-parent-test1-cls {
        color: orange;
      }
    </style>

</head>

<body>

  <table>
    <tr>
    <td class="parent-test-cls"><div><span> Test 1 </span> </div></td>
    <td class="parent-test-cls"><div><span> Test 1 </span></div></td>
    <td class="parent-test1-cls"><div><span> Test 1 </span></div></td>
    <td class="parent-test1-cls"><div><span> Test 1 </span></div></td>
    <td class="parent-test-cls"><div><span> Test 1 </span></div></td>
    </tr>
  </table>
    <script src="assets/js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('div').on('click', function() {
          if ($(this).parent().next().hasClass('parent-test1-cls')) {
            $(this).parent().addClass('next-parent-test1-cls');
          }
          if ($(this).parent().next().hasClass('parent-test-cls')) {
            $(this).parent().addClass('next-parent-cls');
          }
        });
      });
    </script>

</body>