В чем разница в получении элементов в 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>
|
Стоит отметить, что коллекции найденных элементов могут быть двух типов NodeList или HTMLCollection. Коллекция это объект, который представляет список DOM-узлов. Коллекция может быть живой или статичной. Обычно коллекции являютя живыми, что означает, что коллекция оперирует актуальными данными, а не тем состоянием, которое было на момент создания коллекции.
Метод getElementsByTagName возвращает живую HTMLCollection, что видно в примере выше у рони. Метод querySelectorAll возвращает статичную NodeList, т. е. это коллеция, состояние которой было зафиксировано во время её создания.
<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>
<table>
<tr>
<th></th>
<th>DOM API</th>
<th>jQuery</th>
</tr>
<tr>
<td>до удаления</td>
<td id="dom-before"></td>
<td id="jq-before"></td>
</tr>
<tr>
<td>после удаления</td>
<td id="dom-after"></td>
<td id="jq-after"></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const selector = "#slider-13 span";
let domSpans = document.querySelectorAll(selector); // NodeList
//let domSpans = document.getElementById('slider-13').getElementsByTagName('span'); // HTMLCollection
let jqSpans = $(selector);
// до удаления
$("#dom-before").text(domSpans.length);
$("#jq-before").text(jqSpans.length);
// удаление
//domSpans[0].remove();
jqSpans.last().remove();
// после удаления
$("#dom-after").text(domSpans.length);
$("#jq-after").text(jqSpans.length);
</script>
Источник https://www.w3.org/TR/dom/ |
| Часовой пояс GMT +3, время: 19:23. |