Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Нужно получить последний элемент массива

Нужно вырезать последний ip-адрес из массива ["192.168.3.159::ffff:192.168.3.36"], а потом вырезать последние цифры из полученного адреса (то что после последней точки)

Пыталась так но не работает
Код

//var a = $scope.activeSol.ip;----здесь содержится массив ip-адресов
  //var b = a[a.length-1]-----послучаю последний
  //var c = b.split('.');------разбиваю последний адрес 
  //var d = c[3];-----беру последний элемент, его и нудно получить


Ответ:
Походу bold не работает внутри кода.
Код

    var a = ["192.168.3.159::ffff:192.168.3.36"];
    var b = a[a.length-1];
    var c = b.split('.');
    var d = c[6];
    alert(d);




Этот ответ добавлен с нового Винграда - 
Вопрос: Выборка первого и последнего элементов в слайдере на Jquery

Здравствуйте уважаемые коллеги. Подскажите как на jquery(скачать готовые слайдеры не предлагать) реализовать круговую прокрутку слайдеров чтобы при прокрутке первого и последнего слайдера блок слайдов не кончался а прокручивался вкруговую, то есть от последнего к первому и наоборот? Можно конечно сделать с помощью toggleClass но при добавлении новых слайдов нужно увеличивать размер кода, это не есть хорошо. В общем задача такая: надо дать понять крайним слайдам осознание того что они крайние . Ниже мой код с HTML-CSS-Jquery. Чтобы увидеть его работу нужно лишь скопировать его и вставить в корень папки несколько изображений любого размера с названиями 1.jpg, 2.jpg, 3.jpg ... 10.jpg.
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<style type="text/css">
.gallery{width:800px;
height:550px;
border:none;
margin:auto;
padding:0px;
background-color:#F6F3F3}
.container{width:600px;
height:450px;
margin: 30px auto;
padding:0px;
background-color:#464646;
border:solid 1px #B7B7B7;
overflow:hidden}

input#but1{position:relative; left:0px; top:280px}
input#but2{position:relative; left:596px; top:280px}
input#but1, input#but2{background: -webkit-linear-gradient(top, #A4A4A4, #5A5A5A);
background: -moz-linear-gradient(top, #A4A4A4, #5A5A5A);
font-size:20px;
width:100px;
height:30px; cursorointer;
border:solid 1px #414141;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px}
input#but1:hover{background: -webkit-linear-gradient(top, #A4A4A4, #7B7B7B);
background: -moz-linear-gradient(top, #A4A4A4, #7B7B7B);}
input#but2:hover{background: -webkit-linear-gradient(top, #A4A4A4, #7B7B7B);
background: -moz-linear-gradient(top, #A4A4A4, #7B7B7B)}

ul{list-style-type:none}
ul, li{margin:0px; padding:0px}
li{float:left;
width:600px;
height:450px;
border:none}

.container img{width:100%; height:100%; cursorointer}

.window{position:fixed; left:5%; top:5%; width:90%; height:90%; overflow:hidden;
margin:0px; background-color:#DFD9D9;
padding:0px;
border:double 4px #787878;
display:none}
.window img{width:100%; height:100%}
#cont{width:100%; height:96%; border:none; margin:0px; padding:0px}
input#hidden_win{float:right; font-size:20px;
background:-webkit-linear-gradient(top, #A4A4A4, #5A5A5A);
background:-moz-linear-gradient(top, #A4A4A4, #5A5A5A);
cursorointer}
input#hidden_win:hover{background:-webkit-linear-gradient(top, #A4A4A4, #7B7B7B);
background:-moz-linear-gradient(top, #A4A4A4, #7B7B7B)}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#but1").click(function(){
$("ul").fadeOut(100);
$("ul").animate({marginLeft:"+=600"},0);
$("ul").fadeIn(100);
});
$("#but2").click(function(){
$("ul").fadeOut(100);
$("ul").animate({marginLeft:"-=600"},0);
$("ul").fadeIn(100);
});

$("li img").click(function(){
$(".window").fadeIn(200);
$("#cont").append($(this).clone(true));
});
$("#hidden_win").click(function(){
$(".window").fadeOut(150);
$("#cont").empty();
});

});
</script>
</head>
<body>
<div class="gallery">
<input id="but1" type="button" value="Назад">
<input id="but2" type="button" value="Вперед">

<div class="window">
<input id="hidden_win" type="button" value="close X" alt="Close">
<div id="cont"></div>
</div>

<div class="container">
<ul>
<li><img id="pic" src="1.jpg"></li>
<li><img id="pic" src="2.jpg"></li>
<li><img id="pic" src="3.jpg"></li>
<li><img id="pic" src="4.jpg"></li>
<li><img id="pic" src="5.jpg"></li>
<li><img id="pic" src="6.jpg"></li>
<li><img id="pic" src="7.jpg"></li>
<li><img id="pic" src="8.jpg"></li>
<li><img id="pic" src="9.jpg"></li>
<li><img id="pic" src="10.jpg"></li>
</ul>
</div>

</div>
</body>
</html>
Ответ: А что тут непонятного?) По клику по кнопкам с ID but1 и but2 список ul передвигается на 600px либо влево либо вправо с эффектом исчезновения - появления. А по клику по изображениям которые находятся в li (li это собственно и есть сами слайды) можно просмотреть увеличенную копию того изображения по которому кликнули во всплывающем окошке(#cont).

То что в JQ есть выборка первого-последнего элементов я знаю, я не знаю как эту возможность прописать так чтобы первый и последний слайды при прокрутке не задвигали весь ul со слайдами за рамки контейнера а прокручивались по кругу. Я уже весь мозг сломал, не могу это сделать.
Вопрос: Выведение последнего элемента из массива в таблицу.AngularJS

Как в таблицу вывести последний элемент пришедший с сервера на по AJAX запросу AngularJS.
<table border="1">
        <tr>
            <th>Small</th>
            <th>Middle</th>
            <th>Big</th>
        </tr>
        <tr ng-repeat="FileInfo in li">
            <th>{{FileInfo.SizeSmall}}</th>
            <th>{{FileInfo.SizeMiddle}}</th>
            <th>{{FileInfo.SizeBig}}</th>
        </tr>
    </table>


Сейчас при таком подходе много нулевых строк. И только в последней строке заполняются 3 значения. Как мне вывести по последнему индексу эти данные в таблицу с помощью ангуляра?
Ответ: Anton19, тот кусок текста выше не может быть тестовым примером. Т.к. при копировании его в браузер он неработоспособен.
Вопрос: Нужно чтобы при прокрутке списка элементов последний элемент не менял своего положения

как сделать так чтобы при прокрутке списка элементов последний элемент не менял своего положения ?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#content{
    position:relative;
}
#wrap{
    height: 105px;
    overflow-y: auto;
    width: 180px;
    overflow-x: hidden;
}
.two {
    position: absolute;
    bottom: 0;
    color: red;
    background:red;
    width:50px;
    height:50px;
}
</style>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="wrap">
    <div id="content">
        <div class="one">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            <div>15</div>
        </div>
        <div class="two">
            Текст
        </div>
    </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    $(function() {
        var offset = $("#fixed").offset();
        var topPadding = 5;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("two").css({marginTop: $(window).scrollTop() - offset.top + topPadding});
            }
            else {$("two").css({marginTop: 0});};});
    });
</script>
Ответ: WhiteMind, в том то и дело что я этого сделать не смогу,и нужно делать при текущей разметке
Вопрос: Последний элемент

Привет всем!

И так, есть список.

<ul class='container'>
    <li>
        <span>Заголовок 1</span>
        <ul class='container'>
            <li><span>Подзаголовок 1.1</span></li>
        </ul>
        <ul class='container'>
            <li><span>Подзаголовок 1.2</span></li>
        </ul>
    </li>
    <li>
        <span>Заголовок 2</span>
        <ul class='container'>
            <li><span>Подзаголовок 2.1</span></li>
        </ul>
    </li>
</ul>


Выглядит так:
  • Заголовок 1
    • Подзаголовок 1.1
    • Подзаголовок 1.2
  • Заголовок 2
    • Подзаголовок 2.1

Нужно сделать, чтобы было вот так:
  • Заголовок 1
    • Подзаголовок 1.1
    • Подзаголовок 1.2
  • Заголовок 2
    • Подзаголовок 2.1

Если объяснить в словах.
Каждый последний элемент списка, должен быть подчеркнут.
Каждый элемент списка не имеющий вложений, должен быть выделен жирным шрифтом.

Заранее спасибо за ответы.
Ответ: рони, Mess4me,
Спасибо.
То, что нужно.

Теперь лишь понять как это работает.

P.S. У меня не работает <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

А вот так, работает <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Вопрос: Как отменить отступ у последнего элемента

Добрый вечер! Мне нужно отменить у последнего элемента отступ. Когда применяю :last-child слетают все отступы которые были.
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="menu-footer">
                <ul>
                    <li><a href="#">ГЛАВНАЯ</a></li>
                    <li><a href="#">НОВОСТИ</a></li>
                    <li><a href="#">УСЛОВИЯ ПРОКАТА</a></li>
                    <li><a href="#">СПЕЦПРЕДЛОЖЕНИЯ</a></li>
                    <li><a href="#">СОТРУДНИЧЕСТВО</a></li>
                    <li><a href="#">ОТЗЫВЫ</a></li>
                    <li><a href="#">КОНТАКТЫ</a></li>
                </ul>
            </div>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.menu-footer{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 1000px;
}
.menu-footer ul{
    list-style: none;
}
.menu-footer ul li{
    margin-right: 25px;
}
.menu-footer ul li:last-child{
    margin-right: 0;
}
.menu-footer ul li a{
    color: #fff;
    float: left;
    text-decoration: none;
}
Ответ: Все получилось, спасибо
Вопрос: Задержка обработки поступления элементов в массив

Имеем массив.
Каждые N (неизвестно) секунд он расширяется.
Мне нужно каждые 100 мс что то делать с последним элементом массива.
Т.е к примеру рассмотрим такую ситуацию :
1)Создался массив.
2)Через 30 мс он расширился одним элементом.
3)Тут я должен по идеи подождать 70 мс и кое что сделать с ним.
4)900 мс он расширился двумя элементами.
5)Мне ненужно ждать 100 мс потому что с предыдущего расширения прошло уже достаточно времени,а сразу взять первый элемент, но потом подождать 100 мс и взять уже второй.
В общем незнаю поймете ли вы то что я написал, просто я в js не силён и незнаю многих терминов, если что то не понятно то спрашивайте
Ответ: а почему бы вам в глобальной переменной не хранить последнее значение свойства length вашего массива и через каждые 100 мс не сравнивать текущее значение length с сохранённым предыдущим
если увеличилась длина, то только тогда вы "достаёте" новый последний элемент (или два, или десять) и делаете с ним (с ними) то, что и планировали?
Вопрос: выровнять последний элемент карусели как и первый

Просматривая темы в разделе HTML CSS, увидел комментарий вот к этому посту "http://www.cyberforum.ru/html/thread1725460.html" и подумал, что Вы можете немного помочь.
Суть проблемы:
Есть сдвоенная карусель. По дизайну накидали и вверху и внизу навигационные клавиши. Проблема заключается в том, что нижний ряд карусели помещается не полностью, даже если пролистать все элементы до конца. Хотелось бы сделать так, что бы в нижнем ряду помещалось ровное и целое изображение. Подскажите как это сделать. Спасибо за ответ.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="big-images offs2">
    <img src="images/house/carousel-img/img-carusel-1.jpg">
    <img src="images/house/carousel-img/img-carusel-2.jpg">
    <img src="images/house/carousel-img/img-carusel-3.jpg">
    <img src="images/house/carousel-img/img-carusel-4.jpg">
    <img src="images/house/carousel-img/img-carusel-5.jpg">
    <img src="images/house/carousel-img/img-carusel-6.jpg">
    <img src="images/house/carousel-img/img-carusel-7.jpg">
    <img src="images/house/carousel-img/img-carusel-8.jpg">
    <img src="images/house/carousel-img/img-carusel-9.jpg">
    <img src="images/house/carousel-img/img-carusel-10.jpg">
</div>
<div class="thumbs">
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-1(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-2(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-3(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-4(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-5(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-6(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-7(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-8(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-9(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="images/house/carousel-img/img-carusel-10(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 SASS
.big-images {
  position: relative;
  width: 100%;
 
  .owl-item {
    border-top: 2px solid $primary;
    border-bottom: 1px solid $primary;
    border-left: 2px solid $primary;
    border-right: 2px solid $primary;
    img {
      width: 100% !important;
      height: 400px;
    }
  }
  .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    @include transform(translateY(-50%));
    .owl-prev,
    .owl-next {
      position: absolute;
      top: 50%;
      width: 30px;
      height: 150px;
      background: #d0d0d0;
      @include transform(translateY(-50%));
      @include transition(0.4s ease all);
      &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        font: 400 60px/1 $fa;
        color: $white;
        @include transform(translateX(-50%) translateY(-50%));
      }
      &:hover {
        background: $primary;
      }
    }
    .owl-prev {
      left: 2px;
      &:before {
        content: '\f104';
      }
    }
    .owl-next {
      right: 2px;
      &:before {
        content: '\f105';
      }
    }
  }
}
 
.thumbs {
  &__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba($white, 0.5);
    @include transition(0.4s ease all);
  }
  .owl-stage-outer{
    margin: 0 30px;
  }
  .owl-item {
    border: 1px solid $primary;
  }
  .item {
    position: relative;
 
    &:hover {
      .thumbs__overlay {
        cursor: pointer;
        background: transparent;
      }
    }
  }
  .owl-controls{}
  .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    @include transform(translateY(-50%));
    z-index: -1;
    .owl-prev,
    .owl-next {
      position: absolute;
      top: 50%;
      width: 30px;
      height: 100%;
      background: #d0d0d0;
      @include transform(translateY(-50%));
      @include transition(0.4s ease all);
      z-index: 99;
      &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        font: 400 60px/1 $fa;
        color: $white;
        @include transform(translateX(-50%) translateY(-50%));
      }
      &:hover {
        background: $primary;
      }
    }
    .owl-prev {
      left: 0px;
      &:before {
        content: '\f104';
      }
    }
    .owl-next {
      right: 0px;
      &:before {
        content: '\f105';
      }
    }
  }
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
///* Owl carousel
//========================================================*/
;
$(document).ready(function () {
    function initcarousel() {
        console.log('init stat');
        var $sync1 = $(".big-images"),
            $sync2 = $(".thumbs"),
            flag = false,
            duration = 300;
 
        $sync1
            .owlCarousel({
                items: 1,
                //margin: 10,
                nav: true,
                dots: false,
                singleItem: true,
                scrollPerPage: true,
                animateOut: 'fadeOut'
            })
            .on('changed.owl.carousel', function (e) {
                if (!flag) {
                    flag = true;
                    $sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
                    flag = false;
                }
            });
 
        $sync2
            .owlCarousel({
                margin: 0,
                items: 5,
                nav: true,
                center: false,
                dots: false
            })
            .on('click', '.owl-item', function () {
                $sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
 
            })
            .on('changed.owl.carousel', function (e) {
                if (!flag) {
                    flag = true;
                    $sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
                    flag = false;
                }
            });
    }
    $(document).ready(function () {
        initcarousel();
    });
});

Архив изображений:
пример того, что сейчас есть: (Есть ли возможность сделать задний элемент как первый элемент????????)
Ответ:
Сообщение от Kenworth
(Есть ли возможность сделать задний элемент как первый элемент????????
всем превью картинкам нужно задать width: 20%; Что бы 5 штук = 100% ширине блока и влазили в эту ширину.
Вопрос: внутри for вешать событие на элемент

Всем привет. Стала задача перебрать все элементы массива и на нах повесить событие onkeyup. но почему то вешается только на последний элемент.
вот код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
                var input;
        var element;
        console.log(arrayOfBindings[0].name);
        for (var i = 0; i < arrayOfBindings.length; i++) {
            (function() {
                input = arrayOfBindings[i].input;
                element = arrayOfBindings[i].element;
                input.onkeyup = function(e) {  
                    element.innerText = input.value;
                }
            })();
        }
Советовали обернуть в самовызывающуюся функцию, но все равно вешает только на последний элемент.
принципиально сделать циклом for
Ответ: Старайтесь не использовать данный подход, а использовать делегирование событий
В данном решении вы создали кол-во анонимных функций равному кол-ву элементов у которых отслеживаете событие. А могли отработать всего одной функцией используя совместно с правильной разметкой
Так вы загружаете память
Вопрос: Hover для последней строки таблицы

Всем доброго времени суток.
Столкнулся с данной проблемой:
При добавлении hover для строк таблицы, последняя строка, содержащая border-radius, при наведении не распределяет этот радиус, т.е. выделение последнего элемента остаётся без скругленных краев, как сделать так, чтобы при наведении на последнюю строку hover тоже имел скругленные края?
Ответ: так сделай для последней при hover {border-radius} как у твоей последней строки, что то типа
Код CSS
1
2
3
4
tr:last-child:hover{
background: #f00;
border-radius:5px;
}