使用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")); 
});