Блог

Главная - Вопросы по программированию - Это ключевое слово элемент DOM в jQuery

Это ключевое слово элемент DOM в jQuery

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

Я создаю скрипт, который будет добавлять, в каждый элемент списка неупорядоченного списка, за исключением последнего элемента списка — он должен заканчиваться на ;. Это должно происходить для каждого неупорядоченного списка!

Это как…

 <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<ul>
  <li>d</li>
  <li>e</li>
  <li>f</li>
</ul>

…для:

 <ul>
  <li>a,</li>
  <li>b,</li>
  <li>c;</li>
</ul>

<ul>
  <li>d,</li>
  <li>e,</li>
  <li>f;</li>
</ul>

На данный момент мой код выглядит примерно так…

 $('ul').each(function(i) {
    var listsLength = $(this   'li').length;
    $(this   'li').each(function(j) {
        if (i == (listsLength - 1)) {
            $(this).append(';');
        } else {
            $(this).append(',');
        }
    });
}

Я думаю, что проблема в этом коде…

 $( this   'li' )

Есть идеи, как получить тот же эффект?

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

Исправлено. На самом деле также была синтаксическая ошибка, и я также использовал i там, где должно быть помещено j. Теперь все работает, и вот результат.

Правка # 2:

Просто используйте код @lonesomeday … он намного удобочитаемее и легче!

Ответ №1:

Вы не можете сделать this 'li' . this в данном контексте это элемент DOM, а не строка. Чтобы получить желаемый эффект, вам понадобится $(this).find('li') .

Ваш цикл также не нужен. Вы можете сделать что-то намного лучшее с :last-child :

 $('ul li:last-child').append(';');
$('ul li:not(:last-child)').append(',');

Эти две строки будут иметь желаемый эффект.

Комментарии:

1. @Rocket Это, конечно, может быть один… $('li').filter(':last-child').append(';').end().filter(':not(:last-child)').append(','); Но это не так читаемо!

2. @lonesomeday: Еще лучше: $('li', 'ul').append(function(){return $(this).is(':last-child') ? ';' : ','});

3. @lonesome: Но это избавляет от этого непослушного избыточного выбора DOM. ;o) Может быть: $('ul li').slice(0,-1).append(',').end().slice(-1).append(';');

4. @Rocket: Да, вы абсолютно правы. Только что просмотрел HTML. Вероятно, следовало сделать это первым!

5. @daGrevis:-P. это все, что я должен сказать, хе-хе

Ответ №2:

Вместо $( this 'li' ) делать $( 'li', this )

Ответ №3:

this 'li' попытается преобразовать this в строку, а затем объединить 'li' с ней.

Попробуйте это вместо:

 $('li', this)

Ответ №4:

Вы могли бы использовать 

 $(this).find ('>li').each(...)

вместо этого (если проблема действительно здесь).