Javascript-форум - Почему метод .html() не работает так как .innerHTML()?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Почему метод .html() не работает так как .innerHTML()? (https://javascript.ru/forum/events/75135-pochemu-metod-html-ne-rabotaet-tak-kak-innerhtml.html)

Цитата:

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

цикл each и для первого и для второго

Дайте разобраться с предыдущими функциями и методами!)) :help:

Мне понравился вариант 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) {

Зачем лишний мусор в программе? чтобы потом сложнее было разобраться?

Цитата:

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

По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.

<!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>

Цитата:

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

num.html(function(){ arr.push(+this.innerHTML)});

Если я правильно понял, то num здесь взят как объект DOM, а не jq. И метод html к ней всё равно применим? А чтобы перебрать и добавить каждый из этих объектов, методом push, используется this.

рони, так нечестно! Обман зрения! Ничего не дописывается!

<!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>

Цитата:

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

num здесь взят как объект DOM

Неправильно. Объект jQuery.

var num = $('.p')

Цитата:

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

чтобы перебрать и добавить каждый из этих объектов, методом push, используется this

Тоже неправильно.
Перебор выполняет num.html()
this - это конкретный элемент DOM из набора элементов объекта num, получаемый при переборе.

Цитата:

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

А это что за танцы с бубнами?

Я чё-то подумал, что если не переобъявить эту переменную как jq объект оно работать не будет. :-?

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:

Цитата:

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

Перебор выполняет num.html()

понял. Я думал, что html указывает только на то, что нужно взять из элементов DOM текст, а функцией уже идёт перебор и именно this указывает на то, что там есть несколько элементов которые нужно записать в новый массив методом push.

drakulawz,

$a = a;

ничего не переобъявляет. Это две переменные одинакового типа и одинакового содержания. $ здесь ничего не значит.
Просто программисты для удобства - чтобы лучше видеть в тексте программы переменные с объектами jq и применять к ним соответствующие методы - зачастую используют $ в имени переменных.