爲什麼JQuery show（）函數只能在一個（而不是全部）元素上使用選擇器？

Question

JSFiddle。

在下面的SSCCE中，有一個<table>嵌套在另一個<table>內。

這個問題是關於聽衆#add按鈕。具體來說，該函數的最後一個if/else塊。當你運行該代碼，點擊Add TextField按鈕一次（或多次），你會看到#remove按鈕上show()應執行，只有顯示第一個匹配選擇，而不是兩個（或他們全部。

理想情況下，Remove TextField應該所有#remove選擇顯示。

問題是爲什麼？我該如何解決？

$(document).on("click", "button#add", function() { 
 
    event.preventDefault(); 
 

 
    var parentTable = $(this).parent().parent().parent().parent().parent().parent().parent().parent(); 
 
    var lastTableRow = parentTable.children('tbody').children('tr:last'); 
 

 
    //Adding the new row 
 
    parentTable.children('tbody').append(lastTableRow.clone()); 
 

 
    //Reset lastRow variable 
 
    lastTableRow = parentTable.children('tbody').children('tr:last'); 
 
    //Reset the fields 
 
    lastTableRow.find('table tbody tr td input').each(function() { 
 
    $(this).val(''); 
 
    }); 
 

 

 
    //update numberOfRows variable 
 
    var numberOfRows = parentTable.children('tbody').children('tr').length; 
 
    alert("numberOfRows:" + numberOfRows); //check 
 

 

 
    if (!(numberOfRows > 1)) { 
 
    $("#remove").hide(); 
 
    } else { 
 
    $("#remove").show(); 
 
    } 
 

 
});

#outer-table { 
 
    padding: 20px; 
 
    border: 3px solid pink; 
 
} 
 
#inner-table { 
 
    border: 3px solid orange; 
 
} 
 
#remove { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="outer-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 

 

 
     <table id="inner-table"> 
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
       <p style="display:inline-block">Enter first complain:</p> 
 
       <input type="text" /> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 

 
      <tfoot> 
 
      <tr> 
 
       <td> 
 
       <button id="add">Add Textfield</button> 
 
       <button id="remove">Remove Textfield</button> 
 
       </td> 
 
      </tr> 
 
      </tfoot> 
 
     </table> 
 

 

 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 

 

 

 
    <tfoot> 
 
    <tr> 
 
     <td>Table Footer</td> 
 
    </tr> 
 
    </tfoot> 
 

 
</table>

Answer 1

那是因爲你使用id一組對象。每個文檔的id應該是唯一的。您應該改用類名。