在多个div条件下追加jQuery

Question

在div条件下附加PHP响应数据时遇到问题。我正在尝试附加数据，如果type=='I'，它将附加在其他div中，或者如果type=='A'，它将添加在其他div。

我做的代码不起作用，甚至我多次尝试都没有达到目标。我也阅读了其他的帖子，但对我的情况没有帮助。请帮帮我。。。

我如何实现目标并使代码正确。

var mytable = $("table#table");
var mytableWithHeader = mytable.append('<thead><tr><th style="width: 20%; text-align: center; vertical-align: middle;">Name/House</th><th style="width: 10%; text-align: center; vertical-align: middle;">Age/Rent</th></tr></thead><tbody></tbody>');
$.each(response.data, function(i, item) {
mytableWithHeader.find('tbody').append(`
<tr>
<td>${item.name}</td> 
<td>${item.age}</td>
</tr>
`);
});
//I am trying to do is below -
$.each(response.data, function(i, item) {
if ({item.type } == 'I') {
mytableWithHeader.find('tbody').append(`
<tr>
$("div.tab1").prepend("
<td>${item.name}</td> 
<td>${item.age}</td>
");
</tr>
`);
}
if ({ item.type } == 'A') {
mytableWithHeader.find('tbody').append(`
<tr>
$("div.tab2").prepend("
<td>${item.house}</td> 
<td>${item.rent}</td>
");
</tr>
`);
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab1">    
<table id="table"></table>
</div>
<div class="tab2">    
<table id="table"></table>
</div>

Answer 1

简化版本，修复了表中的重复ID，只使用条件分配变量，然后在条件之后只处理这些变量一次

$("table.tab_table").append('<thead><tr><th style="width: 20%; text-align: center; vertical-align: middle;">Name/House</th><th style="width: 10%; text-align: center; vertical-align: middle;">Age/Rent</th></tr></thead><tbody></tbody>');
$.each(response.data, function(i, item){ 
const {type, house, rent, name, age} = item;
let $cont, rowItems ;
if(type === 'A'){
$cont = $('.tab2');
rowItems = [house, rent];              
}else{
$cont = $('.tab1');
rowItems = [name, age];         
}
const $cells = rowItems.map(txt => $('<td>').text(txt)), 
$row = $('<tr>').append($cells);
$cont.find('table').append($row);
});

td{text-align:center}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab1">    
<table class="tab_table"></table>
</div>
<div class="tab2">    
<table class="tab_table"></table>
</div>
<script>
const response = {
data:[
{type:'I', name:'Mr Foo', age:37},
{type:'I', name:'Mrs Bar', age:93},
{type:'A', house:'big', rent:200},
{type:'A', house:'small', rent:100}     
]
}
</script>