使用jQuery动态地从列表中读取属性

Question

现在我已经有了一个ul列表，其中包含一些单选按钮选项和一个单独的表格。当用户从ul列表中单击一个选项时，它会向包含'category'和'select'li属性（但是硬编码）的表格添加一行，并为用户编写注释。我是jQuery的新手，所以现在一切都是硬编码的，这显然不理想。

下面是我现在的代码示例。首先，基本的列表中的用户选择的选项：

<ul class="current_medication"> 
     <li class="category" title="Chronic Pain Referral">Chronic Pain Referral 
     <ul> 
     <li class="select" title="Chronic referral"><input type="radio" class="addRow1" id="radio1" name="modalities" value="1"> 
      <label for="radio1">Chronic referral</label></li> 
     </ul> 
     </li> 

然后jQuery代码，当用户在无线选项单击它增加了一个表行：

$('.addRow1').click(function() { 
$('.mainTable > tbody:last').one().append('<tr style="text-align:center"><td>Chronic Pain Referral</td><td>Chronic referral</td><td><textarea name="notes"></textarea></td></tr>'); 
}); 

正如你可以看到它的硬编码，所以列表中的另一个选项将具有类“addRow2”，并且将会有一个jQuery函数，与addRow1类似，td标签之间的信息发生更改。

我希望能够通过读取类别的标题属性并选择“li's”来实现自动化，所以我只需要为它们添加一个addRow函数。我假设答案存在于.attr（）的某个地方，但我不知道如何让它从单击的单选按钮读取，然后从前面的'li'离包含标题属性的单选按钮最近的相关信息。

Answer 1

您可以点击更改代码结合：

$('.mainTable > tbody:last').one().append(
    '<tr style="text-align:center"><td>' 
    + $(this).closest("li.category").attr("title") 
    + '</td><td>' 
    + $(this).closest("li.select").attr("title") 
    + '</td><td><textarea name="notes"></textarea></td></tr>'); 
}); 

（如果我没有理解你的问题的权利）。

但要注意它没有逃脱HTML，例如，如果您<li>类别是：

<li class="category" title="Chronic Pain &lt;b&gt;Referral"> 

（它会显示慢性疼痛推荐）。

所以我宁愿做：

$('.addRow1').click(function() { 
var tr = $(
    '<tr style="text-align:center"><td class="cat"></td>' 
    + '<td class="sel"></td>' 
    + '<td><textarea name="notes"></textarea></td></tr>'); 
$('.mainTable > tbody:last').one().append(tr); 
tr.find(".cat").text($(this).closest("li.category").attr("title")); 
tr.find(".sel").text($(this).closest("li.select").attr("title")); 
});