Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.07.2019, 01:43
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 94

Как через Js добавить класс ко всем елементам, кроме первого и последнего
Добавил класс к первому и последнему елементу, так:

$(".slider-one-item").first().addClass( "first-slide" );
$(".slider-one-item").last().addClass( "last-slide" );


Теперь нужно также добавить другой класс ко всем елементам в списке, кроме первого и последнего.

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 29.07.2019, 07:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от ethereal
нужно также добавить другой класс ко всем елементам в списке, кроме первого и последнего
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.on {
	color: red;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.test').filter(':not(:first-child,:last-child)').addClass('on');
});
</script>
</head>
<body>
<ol>
	<li class='test'>Item 0</li>
	<li class='test'>Item 1</li>
	<li class='test'>Item 2</li>
	<li class='test'>Item 3</li>
	<li class='test'>Item 4</li>
	<li class='test'>Item 5</li>
</ol>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 29.07.2019, 09:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от ethereal
Добавил класс к первому и последнему элементу,
А вы знаете, что вы можете и не добавлять класс к элементу? Вы можете обратится к элементам так:

.slider-one-item:first-child обращается к первому элементу
.slider-one-item:last-child обращается к последнему элементу
.slider-one-item:nth-child(odd) обращается к нечётным элементам
.slider-one-item:nth-child(even) обращается к чётным элементам
.slider-one-item:not(:first-child):not(:last-child) обращается к элементам кроме первого и последнего

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		.slider-one-item:not(:first-child):not(:last-child) {
			color: red;
		}
	</style>
</head>

<body>
	<ul>
		<li class="slider-one-item">Item 1</li>
		<li class="slider-one-item">Item 2</li>
		<li class="slider-one-item">Item 3</li>
		<li class="slider-one-item">Item 4</li>
		<li class="slider-one-item">Item 5</li>
		<li class="slider-one-item">Item 6</li>
	</ul>
</body>

</html>

Последний раз редактировалось Malleys, 29.07.2019 в 09:09.
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2019, 09:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

css кроме первого и последнего

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        .slider-one-item:nth-child(n+2):nth-last-child(n+2) {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li class="slider-one-item">Item 1</li>
        <li class="slider-one-item">Item 2</li>
        <li class="slider-one-item">Item 3</li>
        <li class="slider-one-item">Item 4</li>
        <li class="slider-one-item">Item 5</li>
        <li class="slider-one-item">Item 6</li>
    </ul>
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2019, 09:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

jquery кроме первого и последнего
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  .red{
      background-color: #FF0000;
  }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
$(function() {
   $(".slider-one-item").slice(1,-1).addClass("red");
});
  </script>
</head>

<body>
 <ul>
        <li class="slider-one-item">Item 1</li>
        <li class="slider-one-item">Item 2</li>
        <li class="slider-one-item">Item 3</li>
        <li class="slider-one-item">Item 4</li>
        <li class="slider-one-item">Item 5</li>
        <li class="slider-one-item">Item 6</li>
 </ul>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как найти элемент с таким же атрибутом и добавить ему класс? nmlgko Общие вопросы Javascript 8 24.09.2015 15:19
как вставлять flash в html через js михаил123 Flash 1 17.11.2012 22:01
Как добавить javascript-код через html()? Ceргей jQuery 2 04.01.2012 02:37
Как добавить элемент в XML через DOM используя PHP? bayah Серверные языки и технологии 6 11.08.2010 13:33
Как вызвать OpenDialog через JS? Некто Элементы интерфейса 6 26.11.2009 14:17