Блог

#jquery

#jquery

Вопрос:

 <ul>
  <li>some text</li>
  <li class="highlight">some text</li>
  <li>some text</li>
  <li class="highlight">some text</li>
  <li>some text</li>
  <li class="highlight">some text</li>
</ul>
  

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

1. Почему бы просто не использовать CSS для выделения ваших строк?

2. Я согласен, CSS имел бы смысл, если вы не хотите большей гибкости в цвете для каждой четной / нечетной строки

3. Мне нужно больше гибкости при выделении элементов li. С принятым решением я могу выделить только клонированные элементы li, в то время как с решением только css весь список должен иметь альтернативные цвета li.

Ответ №1:

 <a href="#">Add More</a>
<ul>
    <li>some text</li>
</ul>    

$('a').click(function() {
    var link = $('ul li:first').clone();
    if($('ul li').length % 2 != 0) {
        link.addClass("highlight");
    }
    link.appendTo('ul');
    return false;
});
  

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

1. Я бы, возможно, добавил туда обработку на случай, если в .attr вызове уже присутствует другой класс. 1 независимо 🙂

2. По какой-либо конкретной причине вы выбрали .attr() вместо .addClass()? просто любопытно 🙂

3. ах да — ответ samccone s addClass` был бы более подходящим для добавления класса.

4. @melee — без причины, и я изменил его — addClass намного лучше

5. @Marek Karbarz ок, круто, мне было интересно, есть ли преимущество в производительности или что-то в этом роде.

Ответ №2:

 $('#cloneli').click(function() {
    $('#test li:first').clone().appendTo('ul');
    $('#test li:odd').addClass('highlight')
})
  

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

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

2. Привет, Хусейн, твой код выглядит хорошо, единственное, что он дублирует весь список при каждом нажатии. Вы просто пропустили добавление «:first». Кроме того, это выглядит как лучшее решение на данный момент. Спасибо!

3. @klikerko, если вы проверите мой первоначальный пост и jsfiddle, у меня там был :first файл, но позже я отредактировал, удалил его и предоставил вам выбирать, какой li файл вы хотите клонировать. В любом случае, я вернул его обратно.

4. @klikerko, и мой код, и принятый ответ схожи по производительности. Мой на самом деле быстрее в Chrome и содержит меньше кода. Проверьте jsperf.com/li-heightlight .

5. Спасибо, Хусейн, я решил выбрать код Марека, потому что это дало мне немного больше гибкости. Его код выделяет только новые элементы li, поэтому, если у меня есть 10 элементов списка в начале, а затем я клонирую один, будет выделен только этот новый. Я знаю, что это не было обязательным требованием, но мне понравилась эта идея. Оба решения великолепны, и мне нравится ваш код, потому что он более удобочитаемый и более короткий. К сожалению, я могу выбрать только один в качестве окончательного решения. Еще раз спасибо за помощь с этим и выполнение дополнительного шага для сравнения обоих решений.

Ответ №3:

Ответ №4:

 $('a').click(function() {
    var newNode = $('ul li:last').clone();
    newNode.toggleClass('highlight');
    newNode.appendTo('ul');
    return false;
});