Добавление <span>в список переменных через запятую в Jquery

Question

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

т.е.

foo, bar , mon, key , base, ball

, напримерчто код выглядит примерно так:

<td class="wide">foo, <span class="alt">bar</span>, mon, <span class="alt">key</span>, base, <span class="alt">ball</span></td>

Итак, я хотел бы добавить класс span к альтернативным значениям.

Есть ли простой способсделать это в JQuery?

Answer 1

Я бы превратил список в ul, а затем использовал бы селектор :nth-child для стилизации каждого чётного li.

Нет, это не будет работать в каждом браузере, но это гораздо более аккуратный способ, чем использование span тегов и javascript, а также то, что это всего лишь незначительный визуальный помощник (смысл не будет потерян, если стиль не отображается ) он менее критичен для работы в старых браузерах.

Для получения дополнительной информации о :nth-child см .:
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
http://www.w3.org/Style/Examples/007/evenodd

Answer 2

function spanize(commaDelimitedString){
   var items = commaDelimitedString.split(',');
   var result = [];
   $.each(items, function(i){
       if(i%2 != 0)
           result.push('<span class="alt">' + this + '</span>');
       else
           result.push(this);
   });
   return result.join(',');
}

Ничего удивительного, но работает.

Answer 3

Если вы получаете его из базы данных, вы, вероятно, захотите сделать это на стороне сервера и добавить эти элементы в свой HTML;не с jQuery.

Однако зачем использовать элементы <span>?Ключевое слово в вашем заголовке и ваш вопрос, который я видел, это список - но пока нет смысла (мои любимые элементы HTML!) <ul> или <ol>.

Какой язык на стороне сервера вы используете?Я предполагаю, что PHP ... когда вы читаете список разделенных запятыми из БД, превращаете его в список, а затем используете CSS для добавления запятых.Это можно сделать с помощью background-image запятой или псевдоэлемента CSS и свойства content.

Пример

В сценарии на стороне сервера PHP:

<?php
    $readFromTheDB = "foo, bar, mon, key, base, ball";
    $list = $keywordsArray = array_map('trim', explode(',', $readFromTheDB));
    echo "<ul>";
    $oddEven = true;
    foreach($list as $listitem) {
        $class = ($oddEven?"odd":"even");
        echo "<li class=\"".htmlentities($class)."\">".htmlentities($listitem)."</li>";
        $oddEven = !$oddEven;
    }
    echo "<ul>";
?>

Затем в вашем файле CSS:

ul li {
    background:url(path/to/images/comma.png) BOTTOM RIGHT NO-REPEAT;
    display:inline;
}
ul li.even {
    font-weight:bolder;
}

Answer 4

Полагаю, вы ищете что-то вроде этого:

jQuery

<script type="text/javascript">
  $(document).ready(function() {
    var data='foo, bar, mon, key, base, ball';

    // Add SPANs to all text parts
    $('#insertdata').html('<span>'+data.split(", ").join("</span>, <span>")+'</span>');

    // Add the highlighting to the odd spans
    $('#insertdata span:odd').addClass('alt');

    // Remove SPANs that are not needed
    $('#insertdata span:even').each(function() {
      $(this).replaceWith($(this).text());
    });
  });
</script>

CSS

<style type="text/css">
  .alt {
    font-weight: bold;
  }
</style>

HTML

<table>
  <tr><td id="insertdata"></td></tr>
</table>

Answer 5

Вы неоднозначны, так как мы не знаем, начинаете ли вы с присутствия элементов <span> или если у вас есть только разделенный запятыми список в виде простого текста, а элементы <span> добавляются jQuery.

Если у вас есть элементы <span> до jQuery

Используя jQuery, вы можете использовать селектор :even .

$('td.wide span:even").addClass("alt");

Если у вас нет элементов <span> до jQuery

(непроверенные)

var list = $('td.wide').html();
var listAsArray = list.split(',');
var newListHtml = '';
for(var i=0; i<listAsArray.length; i++) {
    if(i%2==0) {
        newListHtml += '<span class="alt">';
    }
    newListHtml += listAsArray[i];
    if(i%2==0) {
        newListHtml += '</span>';
    }
}
$('td.wide').html(newListHtml);