Как обернуть в span первое слово

glazkoff · July 29, 2010

Помогите полному юзеру в безнадежном для меня деле(((

Нужно обернуть в span первое слово, либо первые два символа в li-шке

<ul>
<li class="cat_level_1">
<a href="#">01 Первая категория</a></li>
<li class="cat_level_1">
<a href="#">02 Первая категория 2</a></li>
<li class="cat_level_1">
<a href="#">03 Первая категория 3</a></li>
</ul>

Заранее спасибо

fan · July 30, 2010

Можно ИД дать нужным элементам и по ним делать, мне по ИД больше нравится, точно знаешь куда обращаешься.

Vlad · July 30, 2010

Какой-нибудь фреймворк типа jQuery не желаешь использовать?

mishka · July 30, 2010

как по мне так нумерацию лучше генерировать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>list numeration</title>
	<script type="text/javascript">
		function initScript(){
			var list = document.getElementsByTagName('ul');
			var lis = document.getElementsByTagName('li');

			if (list){
				for (var i = 0; i < list.length; i++){
					var arrayLi = [];
					for (var j = 0; j < lis.length; j++){
						if (lis[j].parentNode ==list[i]) arrayLi.push(lis[j]);
					}
					for (var k = 0; k < arrayLi.length; k++){
						arrayLi[k].innerHTML = '<span>' + (k + 1) + '</span>' + arrayLi[k].innerHTML
					}
				}
			}
		}

		if(window.addEventListener)window.addEventListener("load",initScript,false);
		else if(window.attachEvent)window.attachEvent("onload",initScript);
	</script>
</head>
<body>
	<ul class="list">
		<li>text text text</li>
		<li>text text text</li>
		<li>text text text</li>
		<li>text text text</li>
		<li>text text text</li>
	</ul>
	<ul class="list">
		<li>text text text
			<ul class="list">
				<li>text text text</li>
				<li>text text text</li>
				<li>text text text</li>
			</ul>
		</li>
		<li>text text text</li>
		<li>text text text
			<ul class="list">
				<li>text text text</li>
				<li>text text text</li>
				<li>text text text</li>
			</ul>
		</li>
		<li>text text text</li>
		<li>text text text
			<ul class="list">
				<li>text text text</li>
				<li>text text text</li>
				<li>text text text</li>
			</ul>
		</li>
	</ul>
</body>
</html>

psywalker · July 31, 2010

А я бы попроще сделал

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<ul id="ul">
	<li class="cat_level_1">
		<a href="#">01 Первая категория</a>
	</li>
	<li class="cat_level_1">
		<a href="#">02 Первая категория 2</a>
	</li>
	<li class="cat_level_1">
		<a href="#">03 Первая категория 3</a>
	</li>
</ul>
<script type="text/javascript">
	var aLink = document.getElementById('ul').getElementsByTagName('a');
	for(var i=0;i<aLink.length;i++){
		aLink[i].innerHTML = aLink[i].text.replace(/^(\d+)\s/,'<span>$1 </span>');
	}
</script>
</body>
</html>

s0rr0w · July 31, 2010

А я бы попроще сделал

Отличный вариант.

psywalker · July 31, 2010

Отличный вариант.

Да, а главное простой, как пять копеек :rolleyes:

s0rr0w · July 31, 2010

Да, а главное простой, как пять копеек

Это самое главное. Чем проще код, тем лучше. Перегибать палку тоже не стоит, но факт остается фактом.

psywalker · July 31, 2010

Это самое главное. Чем проще код, тем лучше. Перегибать палку тоже не стоит, но факт остается фактом.

Согласен :rolleyes:

Great Rash · July 31, 2010

А если первым словом не цифры будут?

psywalker · July 31, 2010

А если первым словом не цифры будут?

Ну вроде речь шла именно о числах.

А вообще можно немножко переписать регулярочку и всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<ul id="ul">
	<li class="cat_level_1">
		<a href="#">fg Первая категория</a>
	</li>
	<li class="cat_level_1">
		<a href="#">fg Первая категория 2</a>
	</li>
	<li class="cat_level_1">
		<a href="#">03 Первая категория 3</a>
	</li>
</ul>
<script type="text/javascript">
	var aLink = document.getElementById('ul').getElementsByTagName('a');
	for(var i=0;i<aLink.length;i++){
		aLink[i].innerHTML = aLink[i].text.replace(/^\s?([a-zA-Z0-9]+)\s/,'<span>$1 </span>');
	}
</script>
</body>
</html>

Sign In

Как обернуть в span первое слово

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information