Почему метод .html() не работает так как .innerHTML()?
Здравствуйте!
Есть такой скрипт:
var num = $('.p'),
btn = $('.btn');
btn.on({
'click': sum
});
function sum() {
for (var i = 0; i < num.length; i++) {
num[i].innerHTML = num[i].innerHTML + ' ' + (i + 1);
}
}
Он должен ставить в конце каждого параграфа его, соответствующий, номер. НО! Проковырялся с jQuery минут 20 в итоге его метод .html() так и не вывел нумерацию в браузере (хотя через console.log(num) нумерация присваивается). В отличии от его аналога в нативном js - .innerHTML() - этим всё выводится (console.log(num) выводит всё то же, что и с html). Буду очень благодарен если мне объяснит знающий человек в чём тут дело, так как во всех источниках указано, что эти методы являются аналогами друг друга. |
Цитата:
|
<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">Sum</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var num = $('.p'),
btn = $('.btn');
btn.on({
'click': sum
});
function sum() {
for (var i = 0; i < num.length; i++) {
$(num[i]).html( $(num[i]).html() + ' ' + (i + 1));
}
}
</script>
|
Цитата:
|
<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">Sum</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var $num = $('.p'),
btn = $('.btn');
btn.on({
'click': sum
});
function sum() {
$num.append(function(i){return ' ' + ++i});
}
</script>
|
Цитата:
У меня не работает... Цитата:
function sum() {
var arr = [];
for (var i = 0; i < num.length; i++) {
arr[i] = +num[i].innerHTML;
inp.val(arr.sort(srt));
}
}
Функция сортирует номера в параграфах и выводит в инпут, по возрастанию. Но когда ставлю вместо innerHTML html то выводит NaN. :cray: |
Цитата:
innerHTML - это свойство элемента DOM .html() - это метод объекта jQuery Смотрите внимательно пример в пост 3 |
Цитата:
num.each(function(n, e) {
e.innerHTML += ' ' + ++n
})
|
Цитата:
https://x-twig.ru/blog/239/ Цитата:
|
Цитата:
Вот полноценный скрипт:
var num = $('.p'),
btn = $('.btn'),
inp = $('input');
btn.on({
'click': sum
});
function sum() {
var arr = [];
for (var i = 0; i < num.length; i++) {
arr[i] = +num[i].innerHTML;
inp.val(arr.sort(srt));
}
}
function srt(a, b) {
if (a > b) {
return -1;
}
if (a < b) {
return -1;
}
if (a == b) {
return 0;
}
}
Всё работает, я же говорил. Просто думал писать всё на jQuery, но теперь выходит, что так нельзя и innerHTML не заменится тут... |
Цитата:
Метод .html() применяется к объекту jQuery, полученному по конкретному элементу DOM num - объект jQuery со всеми элементами ".p" num[i] - конкретный элемент DOM $(num[i]) - объект jQuery конкретного элемента DOM |
Цитата:
У вас часть кода работает с JQ объектами, а часть с DOM (вот и назвал гибридом). Если на чистом JQ используя его методы, то
num.each(function(n, e) {
$(e).html($(e).html() += ' ' + ++n)
})
где .each() метод выполняющий тоже самое что for(...), n - это индекс текущего элемента, e - текуший элемент как DOM. А если доступен DOM имеющий innerHTML, то зачем же $(e).html($(e).html() += ' ' + ++n), если проще выполнить e.innerHTML += ' ' + ++n. Здесь $(e), это лишняя трата энергии. ;) |
Цитата:
Разве что древнюю какую версию jq используешь... |
Цитата:
if (a > b) { return -1; } if (a < b) { return -1; } if (a == b) { return 0; } } |
Цитата:
|
Цитата:
Цитата:
function sum() {
$(num).append(function(i){return ' ' + ++i});
}
В целом - так конечно короче и проще. Благодарю за подсказку. |
Цитата:
|
Цитата:
У Aetae объявление переменных
var $num = $('.p'),
В вашем варианте при
var num = $('.p'),
достаточно
function sum() {
num.append(function(i){return ' ' + ++i});
}
|
Еще вариант - для разнообразия
<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">Sum</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var num = $('.p'),
btn = $('.btn');
btn.on({
'click': sum
});
function sum() {
num.html(function(i){return $(this).html() + ' ' + ++i});
}
</script>
Вместо $(this).html() можно использовать this.innerHTML |
Цитата:
Цитата:
Цитата:
|
Цитата:
Но если к примеру в цикле, используя jq метод, или в обработчике событий, когда в методе доступен DOM элемент как this, который имеет свойство value, получать этот элемент как jq объект ради получения его значения - $(this).val(), это и глупо, и не оправдано, ибо это получить проще как this.value. |
Цитата:
|
Цитата:
|
Цитата:
Допустим есть поле ввода и нужно что-то сделать на странице при вводе некоторого значения в него. При этом все эти операции не касаются самого поля.
$('input').on('input', function() {
if(this.value=='x') {
//что-то делаем используя методы JQ
}
})
Здесь ради проверки условия поступать как if($(this).val()=='x') просто расточительство не имеющее ни пользы ни практичности. А если при этом значении поле должно переливаться цветами аки хамелеон и мы будем "хамелеонить" на JQ, то нам потребуется поле как jq объект, вот тут все оправдано:
$('input').on('input', function() {
$this = $(this); //input как объект jq
if($this.val()=='x') { //все ОК
//хамелеоним с $this
} else {
//иначе $this сидит и не отсвечивает
}
})
|
Цитата:
Цитата:
|
drakulawz,
Метод html вызывает функцию столько раз, сколько элементов находится в обьекте num. Внутренний параметр i работает в качестве счетчика элементов. Слова в html не имеют никакого значения - если бы там были Яблоко , Слон и т.п., то элементы пронумеровались бы точно так же |
Цитата:
Первое: Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер. Второе: Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания. Выходит, что этот метод не подходит к второму заданию? Он ведь считает сами параграфы, а не то что в них? |
drakulawz,
цикл each и для первого и для второго |
drakulawz,
любой цикл html или each или text можно использовать |
Второе задание без явного цикла
<div class="p">5</div>
<div class="p">3</div>
<div class="p">1</div>
<div class="p">4</div>
<button class="btn">Sum</button>
<input type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var num = $('.p'),
btn = $('.btn'),
inp = $('input');
btn.on({
'click': sum
});
function sum() {
var arr = [];
num.html(function(){ arr.push(+this.innerHTML)});
inp.val(arr.sort(srt));
}
function srt(a, b) {
if (a > b) {
return 1;
}
if (a < b) {
return -1;
}
if (a == b) {
return 0;
}
}
</script>
|
Цитата:
Мне понравился вариант Aetae, хоть сначала я его и не понял.:p Вот, попробовал применить на ещё одном задании:
var a = $('a');
/*первый вариант функции вывода ссылок;*/
// function sum() {
// for (var i = 0; i < a.length; i++) {
// $(a[i]).html($(a[i]).html() + '(' + a[i].href + ')');
// }
// }
// sum();
/*второй вариант функции вывода ссылок;*/
function sum() {
$a = a;
$a.append(function (i) {
return '(' + a[i].href + ')'
})
}
sum();
Скинул два варианта, первый явно бредовый какой-то вышел, с append по-красивее выходит.:) Как сказал laimas, нефиг совать jq всюду и делать "гибриды"... Если уж делать на jq то правильно. Благодарю всех участвующих за терпение и (особенно) примеры функций:write: . Только проблема в том, что из ваших ответов я задаюсь всё большим количеством вопросов:help: . Надеюсь, что в дальнейшем смогу получить на них ответы;). Так то, я уже два месяца как мучаю этот javascript, толком так и не продвинулся. Всякие мелочи делаю, даже калькулятор нормальный сварганить немогу.:cray: |
:)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $num = $(".p"),
btn = $(".btn"),
inp = $("input");
btn.on({
"click": sort
});
function sort() {
var val = $.map($num, function(el) {
return +el.textContent
}).sort(function(a, b) {
return a - b
});
inp.val(val)
}
});
</script>
</head>
<body>
<input type="text">
<div class="p">10</div>
<div class="p">0</div>
<div class="p">5</div>
<div class="p">-1</div>
<button class="btn">Sort</button>
<script>
</script>
</body>
</html>
|
drakulawz,
А это что за танцы с бубнами?
var a = $('a');
$a = a;
$a.append(function (i) {
Зачем лишний мусор в программе? чтобы потом сложнее было разобраться? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: num;
}
.num:after {
counter-increment: num;
content: ' 'counter(num);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $num = $(".p"),
btn = $(".btn");
btn.on({
"click": num
});
function num() {
$num.addClass('num')
}
});
</script>
</head>
<body>
<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">num</button>
<script>
</script>
</body>
</html>
|
Цитата:
|
рони, так нечестно! Обман зрения! Ничего не дописывается!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: num;
}
.num:after {
counter-increment: num;
content: ' 'counter(num);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $num = $(".p"),
btn = $(".btn"),
tst = $(".test"),
inp = $("input");
tst.hide();
btn.on({
"click": num
});
tst.on({
"click": test
});
function num() {
$num.addClass('num');
tst.show();
}
function test() {
var arr = [];
$num.each(function() { arr.push(this.innerHTML); });
inp.val(arr);
}
});
</script>
</head>
<body>
<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">num</button>
<button class="test">test</button>
<input type="text">
<script>
</script>
</body>
</html>
|
Цитата:
var num = $('.p')
Цитата:
Перебор выполняет num.html() this - это конкретный элемент DOM из набора элементов объекта num, получаемый при переборе. |
Цитата:
function sort() {
var val = $.map($num, function(el) {
return +el.textContent
}).sort(function(a, b) {
return a - b
});
inp.val(val)
}
рони, с методом map мне ещё предстоит знакомство. Он создаёт новый масив в котором записаны функции по отношению к элементам массива num. В данном случаи оно создаёт массив цифр, так как в num у нас записаны цифры. Так? А такая запись не правильная была бы +el.text?
function num() {
$num.addClass('num')
}
Интересно:write: |
Цитата:
|
drakulawz,
$a = a;ничего не переобъявляет. Это две переменные одинакового типа и одинакового содержания. $ здесь ничего не значит. Просто программисты для удобства - чтобы лучше видеть в тексте программы переменные с объектами jq и применять к ним соответствующие методы - зачастую используют $ в имени переменных. |
| Часовой пояс GMT +3, время: 19:40. |