Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2018, 11:49
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Почему метод .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).
Буду очень благодарен если мне объяснит знающий человек в чём тут дело, так как во всех источниках указано, что эти методы являются аналогами друг друга.
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2018, 12:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от drakulawz
в чём тут дело
Не правильное использование.
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2018, 12:15
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 05.09.2018, 12:25
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от Dilettante_Pro
Dilettante_Pro
Благодарю!
Ответить с цитированием
  #5 (permalink)  
Старый 05.09.2018, 12:31
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

<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>
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 05.09.2018, 12:48
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от Aetae
Aetae
разве так будет работать, без цикла?
У меня не работает...

Сообщение от Dilettante_Pro
Dilettante_Pro
кстати, а как записать вот такое через html:

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.
Ответить с цитированием
  #7 (permalink)  
Старый 05.09.2018, 12:56
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от drakulawz
Но когда ставлю вместо innerHTML html то выводит NaN.
Вместо нельзя.
innerHTML - это свойство элемента DOM
.html() - это метод объекта jQuery
Смотрите внимательно пример в пост 3
Ответить с цитированием
  #8 (permalink)  
Старый 05.09.2018, 13:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от drakulawz
как записать вот такое через html
Если уж "гибрид", то:

num.each(function(n, e) {
    e.innerHTML += ' ' + ++n
})
Ответить с цитированием
  #9 (permalink)  
Старый 05.09.2018, 13:06
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от Dilettante_Pro
Вместо нельзя.
ОК. Тогда почему их называют аналогами друг друга?
https://x-twig.ru/blog/239/

Сообщение от Dilettante_Pro
Смотрите внимательно пример в пост 3
Я увидел, рассмотрел, понял и, даже, запомнил. Метод html записывает в массив параграфов тот же параграф но с добавлением нумерации - это понятно. Вся проблема была не в понимании а в синтаксисе - мне, почему-то, сложно запомнить эти нюансы.
Ответить с цитированием
  #10 (permalink)  
Старый 05.09.2018, 13:16
Аспирант
Отправить личное сообщение для drakulawz Посмотреть профиль Найти все сообщения от drakulawz
 
Регистрация: 13.08.2018
Сообщений: 79

Сообщение от laimas
Если уж "гибрид"
ещё не совсем понимаю значение слова гибрид в js.
Вот полноценный скрипт:
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 не заменится тут...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему так работает, а по-другому нет? ogurchik Общие вопросы Javascript 2 10.09.2015 18:08
Как вызвать метод? ibolgenos Общие вопросы Javascript 22 20.09.2014 00:04
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
В Firefox 3.5.5 не работает метод POST. Какие методы лечения? javascript_pupil AJAX и COMET 1 10.12.2009 20:34
Драгабл работает не так как надо valek1989 jQuery 0 16.11.2009 18:09