Как проверить, нет ли элементов / тегов внутри другого элемента / тега с помощью jQuery - PullRequest
Новая
       4

Как проверить, нет ли элементов / тегов внутри другого элемента / тега с помощью jQuery

0 голосов
/ 07 марта 2011

У меня есть поиск по всему сайту Stack Overflow, но я могу найти ответ

Приведенный ниже код не показывает никаких предупреждений, когда больше нет <tr> в <tbody>, почему это так?

Я уверен, что нижеприведенное должно работать, но ничего не происходит: 

<script>
  $('td > a').click(function(e){
  var this_elem = $(this);

  if( this_elem.hasClass("remove") ){
    this_elem.parent().parent().remove();
  }

  return false;

 });

 if( $("tbody > tr").length === 0 ){

  alert("No more rows of products...");

 }
</script>

HTML: 

<table>
 <tbody>
  <tr>
   <td class="first-td">
    <img src="assets/product-image.jpg" alt="product image" />

    <div class="prod-desc-col">
     <h3>Samsung LE40C580J1 LCD HD 1080p Digital Television, 40 Inch with Built-in Freeview HD, Samsung LE40C580J1 LCD HD 1080p Digital Television, 40 Inch with Built-in Freeview HD</h3>
     <p>Product Code: 1254782</p>
     <p>In stock</p>
    </div>
   </td>
   <td>
    <input type="text" value="1" size="4" />
    <a href="#" title="Update" class="update">Update</a>
    <a href="#" title="Remove" class="remove">Remove</a>
   </td>
  </tr>
 </tbody>
</table>

Ответы [ 4 ]

4 голосов
/ 07 марта 2011

Поскольку вы не учитываете следующие строки, вы учитываете все строки в tbody в всех в table сВаша страница.

Учитывая дополнительные детали, добавленные к вопросу, я предлагаю вам следующее: 

$('a.remove').click(

function() {
    $(this).closest('tr').remove(); // a slightly more concise form of your own code
    return false;
});

$('table tbody').bind('DOMNodeRemoved', function() {
    var c = $('table tbody tr').length;
    if (c === 1) { // testing against '1' because the count is performed before
                   // the row is actually removed from the DOM.
        alert("The final row is about to go.");
    }
});

Демонстрация JS Fiddle .

0 голосов
/ 07 марта 2011

может быть, вам стоит использовать nextAll

http://api.jquery.com/nextAll/

0 голосов
/ 07 марта 2011

Вы не предоставили нам много информации, но я думаю, что ваш селектор JQuery ищет строки в ЛЮБОЙ таблице на вашей странице.Вполне возможно, что если у вас есть другие таблицы на вашей странице, эти строки тоже учитываются.Что вам нужно сделать, это сделать ваш селектор JQuery более конкретным.Например: 

if( $(" #myTableName > tbody > tr").length === 0 ){
    alert("No more rows of products...");
}

Обратите внимание, что я добавил идентификатор в селектор.Это говорит JQuery искать только строки в таблице с идентификатором «myTableName».

0 голосов
/ 07 марта 2011

У вас есть только одна таблица на странице?В противном случае вы подсчитываете все строки во всех таблицах на странице.

Чтобы подсчитать количество строк, работающих таким образом, вы можете посмотреть мой тест здесь: http://jsfiddle.net/2DDZz/

Редактировать:

Когда вы разместили код, я вижу, что вы проверяете количество строк только при загрузке страницы.Вы должны проверять это каждый раз, когда вы удалили строку: 

$('td > a').click(function(e){
  var this_elem = $(this);
  if( this_elem.hasClass("remove") ){
    this_elem.parent().parent().remove();

    if( $("tbody > tr").length === 0 ){
      alert("No more rows of products...");
    }

  }
  return false;
});
...