Форум

lordenas · #1 (**permalink**) 26.03.2018, 23:21

Подскажите пожалуйста новичку... Есть вот такой вот HTML код.

<div id="slider-13" class="test">
   <div class="rangeouter"></div>
   <div class="rangeinner"></div>
   <div class="rangeselector"></div>
   <div class="slider-line">
       <span>0</span>
       <span>1</span>
       <span>2</span>
       <span>3</span>
       <span>4</span>
   </div>
</div>

Если я обращаюсь к элементу slider-13 ко всем элементам span
я получаю коллекцию (массив) элементов.

document.getElementById('slider-13').getElementsByTagName('span');

А если при помощи Jquery получаю объект..

$('#slider-13 span')

В чем принципиальная разница? И как при помощи Jquery получить такой же результат как, и в первом запросе?

рони · #2 (**permalink**) 26.03.2018, 23:38

lordenas,
далее что хотите сделать?

рони · #3 (**permalink**) 26.03.2018, 23:45

Сообщение от lordenas

В чем принципиальная разница?

1 живая коллекция (количество span зависит от ваших маниуляций)
2 количество span фиксированное, то которое было на момент поиска элементов (span)

lordenas · #4 (**permalink**) 26.03.2018, 23:52

Сообщение от рони

lordenas,
далее что хотите сделать?

Далее хочу пройтись циклом по всем span и отнять -10

var s13=document.getElementById('slider-13').getElementsByTagName('span');
for(var i=0;i<s13.length;i++){
    
    s13[i].innerHTML = s13[i].innerHTML-10;
}

а через jquery не получается так сделать..

j0hnik · #5 (**permalink**) 26.03.2018, 23:54

$('#slider-13 span').each(function(){
this.innerHTML -= 10;
});

рони · #6 (**permalink**) 26.03.2018, 23:59

lordenas,
вариантов много ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $('#slider-13 span').html(function(i, num) {
     return num - 10
})
});
  </script>
</head>

<body>
<div id="slider-13" class="test">
   <div class="rangeouter"></div>
   <div class="rangeinner"></div>
   <div class="rangeselector"></div>
   <div class="slider-line">
       <span>0</span>
       <span>1</span>
       <span>2</span>
       <span>3</span>
       <span>4</span>
   </div>
</div>

</body>
</html>

lordenas · #7 (**permalink**) 27.03.2018, 00:03

Сообщение от рони

1 живая коллекция (количество span зависит от ваших маниуляций)
2 количество span фиксированное, то которое было на момент поиска элементов (span)

Спасибо за ответы!

1) То есть при обращении к переменной там может быть всегда разное значение?

рони · #8 (**permalink**) 27.03.2018, 00:05

Сообщение от lordenas

То есть при обращении к переменной там может быть всегда разное значение?

да, будет то которое "сейчас".

lordenas · #9 (**permalink**) 27.03.2018, 00:07

Спасибо за разъяснение!

рони · #10 (**permalink**) 27.03.2018, 00:14

Сообщение от lordenas

1) То есть при обращении к переменной там может быть всегда разное значение?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var jsSpan = document.getElementById('slider-13').getElementsByTagName('span'),
    jquerySpan = $('#slider-13 span');
    $("<div>до удаления jsSpan : " + jsSpan.length +" <br>jquerySpan : " + jquerySpan.length + "</div>").appendTo("body");
    $('#slider-13 span').last().remove();//удаление последнего span
    $("<div>после удаления jsSpan : " + jsSpan.length +" <br>jquerySpan : " + jquerySpan.length + "</div>").appendTo("body");

});
  </script>
</head>

<body>
<div id="slider-13" class="test">
   <div class="rangeouter"></div>
   <div class="rangeinner"></div>
   <div class="rangeselector"></div>
   <div class="slider-line">
       <span>0</span>
       <span>1</span>
       <span>2</span>
       <span>3</span>
       <span>4</span>
   </div>
</div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript