Загрузить предыдущую таблицу за пределами div

Question

Ниже вы найдете фрагмент кода. Контейнер с двумя дочерними div, каждый из которых содержит таблицу. Один заполнен другой isn.'t. [A] чуть выше второй таблицы следует скопировать содержимое первой таблицы во вторую таблицу.

<div class="example-code"> 
    <div class="content-box"> 
      <div class="content-box-wrapper"> 
       <table id="carTable-20685519" data-car-id="20685519"> 
         <tr><td>Dummy Data 1 <input type="text" name="car[20685519]"</td></tr>  
       </table> 
      </div> 
    </div> 
    <div class="content-box"> 
      <div class="content-box-wrapper"> 
       <a id="copy-20685519">Copy from above table</a> 
       <table id="carTable-206823698" data-car-id="206823698">  
       </table> 
      </div> 
    </div> 
</div> 

Я создал для этого JQuery. Однако, похоже, что prev() не ищет вне текущего div. Как я могу заставить это работать?

<script> 

$("a[id^='copy']").on('click', function() { 

    console.log('Clicked'); 

    var id = $(this).next("table").attr('data-car-id'), 
      previousId = $(this).prev('table').attr('data-car-id'), 
    html = $(this).prev("table[id^='carTable-']").prop('innerHTML'); 

    $(this).next("table").html(html).find('input').each(function() { 
     this.name = this.name.replace(previousId, id); 
    }); 
}); 

</script> 

Demo in JSFiddle

Answer 1

Что-то вроде этого?

$("a[id^='copy']").on('click', function() { 
    var previous = null; 
    var tables = $('table'); 
    var index = tables.index($(this).next("table")); 
    if (index > 0) { 
     previous = $(tables[index-1]) 
    } 
    $(this).next("table").html($(previous).html()).find('input').each(function() { 
     this.name = this.name.replace(previousId, id); 
    }); 
}); 

http://jsfiddle.net/90jtudd4/1/

Answer 2

Они находятся в различных отраслях. Используйте closest для поиска вверх, затем find для поиска вниз. Используйте first() в соответствии с исходной таблицей (которая является первой из двух таблиц в этом дедушке дедушки):

например.

$("a[id^='copy']").on('click', function() { 

    console.log('Clicked'); 

    var $table = $(this).next("table"); 
    var id = $.attr('data-car-id'), 
     previousId = $table.attr('data-car-id'), 
    html = $table.closest('.example-code').find("table[id^='carTable-']").first().html(); 

    $table.html(html).find('input').each(function() { 
     this.name = this.name.replace(previousId, id); 
    }); 
}); 

Кроме того, сохранить результат селекторов jQuery, а не требовать снова и снова (намного быстрее). например var $table

JSFiddle:http://jsfiddle.net/TrueBlueAussie/90jtudd4/2/