Форум

ethereal · #1 (**permalink**) 29.07.2019, 01:43

Добавил класс к первому и последнему елементу, так:

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

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

Спасибо!

ksa · #2 (**permalink**) 29.07.2019, 07:56

Сообщение от 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>

Malleys · #3 (**permalink**) 29.07.2019, 09:02

Сообщение от 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>

рони · #4 (**permalink**) 29.07.2019, 09:37

<!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

<!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>

Форум

Справочник

Discord чат

Курсы javascript