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)

laimas 05.09.2018 16:02

Цитата:

Сообщение от drakulawz
Имеете в виду, что лучше делать нативными методами js?

Для простых операций да. jQuery, это не новый язык, это js библиотека и в недрах ее все выполняется на нативном JS, то есть JQ берет на себя все "тяготы" кроссбраузерности или позволяет написать "желаемое" простым выражением, которое на нативном JS будет более объемным.

Но если к примеру в цикле, используя jq метод, или в обработчике событий, когда в методе доступен DOM элемент как this, который имеет свойство value, получать этот элемент как jq объект ради получения его значения - $(this).val(), это и глупо, и не оправдано, ибо это получить проще как this.value.

drakulawz 05.09.2018 16:25

Цитата:

Сообщение от laimas
Но если к примеру в цикле, используя jq метод, или в обработчике событий, когда в методе доступен DOM элемент как this, который имеет свойство value, получать этот элемент как jq объект ради получения его значения - $(this).val(), это и глупо, и не оправдано, ибо это получить проще как this.value.

Понятно, но это изначально задания на js. Я же пытаюсь зделать их на jq. Не спрашивайте зачем я это делаю, просто мне jq практичнее...

Dilettante_Pro 05.09.2018 16:48

Цитата:

Сообщение от drakulawz
А как функция понимает, что в num записаны цифры?

Какие цифры?

laimas 05.09.2018 17:09

Цитата:

Сообщение от drakulawz
просто мне jq практичнее...

Использование JQ там где нет необходимости, это не есть практичность, это есть расточительство. Если это единичный случай, ладно, но если правило, то весьма плохо.

Допустим есть поле ввода и нужно что-то сделать на странице при вводе некоторого значения в него. При этом все эти операции не касаются самого поля.

$('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 05.09.2018 20:07

Цитата:

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

понял... буду иметь в виду. Я везде jq совал так как думал, что он облегчает и сокращает функции и на нативном js вообще никто сейчас не программирует.

Цитата:

Сообщение от Dilettante_Pro
Какие цифры?

у Вас числа прописаны словами, вот и интересуюсь, как оно понимает, что это цифры, а не строки с буквами...

Dilettante_Pro 05.09.2018 21:58

drakulawz,
Метод html вызывает функцию столько раз, сколько элементов находится в обьекте num.
Внутренний параметр i работает в качестве счетчика элементов. Слова в html не имеют никакого значения - если бы там были Яблоко , Слон и т.п., то элементы пронумеровались бы точно так же

drakulawz 07.09.2018 10:23

Цитата:

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

Ага, оно просто пересчитало параграфы. Я просто сам уже запутался, я ведь в одной теме два разных задания впихнул. :stop:
Первое:
Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.
Второе:
Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания.
Выходит, что этот метод не подходит к второму заданию? Он ведь считает сами параграфы, а не то что в них?

рони 07.09.2018 12:08

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

рони 07.09.2018 12:12

drakulawz,
любой цикл html или each или text можно использовать

Dilettante_Pro 07.09.2018 12:24

Второе задание без явного цикла
<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>


Часовой пояс GMT +3, время: 00:22.