В чем разница в получении элементов в Jquery и JS?
Подскажите пожалуйста новичку... Есть вот такой вот 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 получить такой же результат как, и в первом запросе? |
lordenas,
далее что хотите сделать? |
Цитата:
2 количество span фиксированное, то которое было на момент поиска элементов (span) |
Цитата:
var s13=document.getElementById('slider-13').getElementsByTagName('span');
for(var i=0;i<s13.length;i++){
s13[i].innerHTML = s13[i].innerHTML-10;
}
а через jquery не получается так сделать.. |
$('#slider-13 span').each(function(){
this.innerHTML -= 10;
});
|
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>
|
Цитата:
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>
|
| Часовой пояс GMT +3, время: 08:34. |