Question

我有如下的html表：

<table id="list" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr class='thread selected'>
    <td class='subject'>Jill</td>
    <td>Smith</td> 
    <td class='flags'>
    <span class='attach'></span>
    <span class='flag'>
    <span class='flag'></span>
    </span>
    </td>
  </tr>
  <tr class='thread'>
    <td class='subject'>Eve</td>
    <td>Jackson</td> 
    <td class='flags'>
    <span class='attach'></span>
    <span class='flag'>
    </span>
  </td>
  </tr>
</table>

如果用户选择了一行，我想在最后一个范围内动态添加title='With flag'，如

<span class='flag' title='With flag'></span>
</span>

并希望alert('title added');使用if语句。

我如何使用jQuery实现这个目标

Answer 1

试试这个：

$(".thread").click(function() {
   $(this).find(".flag").attr("title","With flag");
   alert("title added"); 
});

Answer 2

你可以尝试一下：

$('#list').on("click", '.thread tr', function(){
    $(".flag").attr("title","With flag");
   alert("title added");
});

Answer 3

尝试

$(".thread").click(function() {
    $(".flag").attr("title","With flag");
    alert("title added"); 
});

希望这有帮助

Answer 4

您可以使用last-child和span找到课程flag的最后一位，并添加您的属性。

$(".thread").click(function() {
   $(this).find('td:last-child span.flag').attr("title","With flag");
   alert("title added"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="list" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr class='thread selected'>
    <td class='subject'>Jill</td>
    <td>Smith</td> 
    <td class='flags'>
    <span class='attach'></span>
    <span class='flag'>
    <span class='flag'></span>
    </span>
    </td>
  </tr>
  <tr class='thread'>
    <td class='subject'>Eve</td>
    <td>Jackson</td> 
    <td class='flags'>
    <span class='attach'></span>
    <span class='flag'>
    </span>
  </td>
  </tr>
</table>

添加时，jQuery将属性添加到span和alert

4 个答案: