Jquery函数仅在第一行工作，但在以下行上失败

Question

现在，代码仅在第一行工作，但无法在以下行上工作，有什么想法？

if (typeof set == "undefined") { 
 
    var set = $(".url").val(); 
 
} 
 
$(".addSkip").on('click', function() { 
 

 
    $(".url").val(set + $("#name").val()); 
 

 

 
});

<table> 
 
    <tr> 
 

 
    <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <input type="button" size="10" value="confirm date" class="addSkip"></td> 
 
    <td>Nextdate<input type="text" value="100" id="name" size="15" name="nextdate[]" class="end_date" \> </td> 
 

 
    <td>traditionalmessage<textarea rows="3" cols="20" readonly class="url" name="traditionalmessage[]">traditionalmessage</textarea> </td> 
 
    
 
     <td>simplifiedmessage<textarea rows="3" cols="20" readonly class="url" name="simplified[]">simplifiedmessage</textarea> </td> 
 
    <td>engmessage<textarea rows="3" cols="20" readonly class="url" name="engmessage[]">engmessage</textarea> </td> 
 
    
 
    </tr> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

Answer 1

尝试用类名来代替id。而找到我们$(this).closest('tr').find(".url")

1. closest()比赛tr
2. find()匹配的儿童元素的父内
3. 元素而你的HTML是不正确对齐

更新

if (typeof set == "undefined") { 
 
    var set = $(".url").val(); 
 
} 
 
$(".addSkip").on('click', function() { 
 

 
    $(this).closest('tr').find(".url").eq(0).val(set + $(this).closest('tr').find(".end_date").val()); 
 

 
});

<table> 
 
    <tr> 
 

 
    <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <input type="button" size="10" value="confirm date" class="addSkip"></td> 
 
    <td>Nextdate<input type="text" value="100" id="name" size="15" name="nextdate[]" class="end_date" \> </td> 
 

 
    <td>traditionalmessage<textarea rows="3" cols="20" readonly class="url" name="traditionalmessage[]">traditionalmessage</textarea> </td> 
 
    
 
     <td>simplifiedmessage<textarea rows="3" cols="20" readonly class="url" name="simplified[]">simplifiedmessage</textarea> </td> 
 
    <td>engmessage<textarea rows="3" cols="20" readonly class="url" name="engmessage[]">engmessage</textarea> </td> 
 
    
 
    </tr> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>