Обновить содержимое div без id

Question

Я пытаюсь добавить кнопку обновления в таблицу. Я сейчас использую.

var $target = $(this).parent().parent().next('.box'); 
$target.load("$site #" +$target.prop("nodeName"); 

На странице есть много .box. Когда я использую .load(), есть ли способ, с помощью которого я могу ссылаться на конкретный .box, возможно, по местоположению в DOM?

Также есть способ отложить загрузку таблицы, сообщив, что обновление в базе данных завершено? Я обрабатываю обновление базы данных до загрузки содержимого, но он все равно загружается, как если бы обновление базы данных не было, и требуется обновление.

Спасибо

Answer 1

Вы можете реорганизовать HTML-код немного, например, обернув .box-содержимое внутри .refresh DIV

<section class="col col-lg-8"> 
    <div class="box"> 
     <div class="box-header"> 
       <h2> <i class="fa fa-user"></i><span class="break"></span>Recently Added</h2> 

      <div class="box-icon"><a class="btn-minimize" href="#"><i class="fa fa-chevron-up"></i></a> 

      </div> 

     </div> 
     <!-- Box Header --> 
     <div class="box-icon"><a class="btn-reload" href="#">reload<i class="fa fa-circle"></i></a> 


     <div class="box-content"> 
      <table class="table table-striped table-bordered bootstrap-datatable datatable"> 
       <thead> 
        <tr> 
         <th>Username</th> 
         <th>Date registered</th> 
         <th>Role</th> 
         <th>Status</th> 
         <th>Actions</th> 
        </tr> 
       </thead> 
      </table> 
     </div> 
    </div> 

затем var $target = $(this).parent().parent().next('.box-content'); может быть изменено на что-то вроде:

var $target = $(this).find('.box-content'); 

В противном случае стиль .parent.parent, который у вас есть, должен работать до тех пор, пока HTML поддерживает этот макет для каждого раздела; Вы ссылаетесь на его местоположение в DOM, используя код parent.parent.next, поскольку вы знаете, что это будет местоположение соответствующего div-содержимого box-content.

Edit: Для того, чтобы уточнить, почему найти будет работать с HTML структуры .find и элементы подобные .children смотрят только на узелов: от http://api.jquery.com/find/

На основе образца Html вы показали мне:

<.box> 
    <box descendant> 
     <descendant element> 
    </box descendant> 
    <box descendant2> 
    </box descendant2> 
</box> 
<.box> 
    <box descendant> 
     <descendant element> 
    </box descendant> 
    <box descendant2> 
    </box descendant2> 
</box> 

Doing:

$(.box).click(function(){ 
    $(this).find(descendant element) 
}); 

всегда будет получить правильный элемент, так как .find будет находиться в пределах родительского элемента