JQUERY как работают строчки кода

Question

могли бы объяснить/подправить комментарии кода?Комментарии написал сам,но уверен что не так что-то.. Пытаюсь разобраться в лабораторной работе.

var parentId = $(this).parent().attr("id"); //родительскому элементу присваивается атрибут id?

var text = $('#' + parentId +' h2').text(); //переменная text получает ссылку на заголовок h2 из статьи при помощи сборки строки?

$('<a>', { href: '#' + parentId, text: text}).appendTo(bookMarks); // а здесь вообще завал,понятно что добавляет что-то в bookMarks,но как это трактовать не пойму..

Answer 1

Первая запись

var parentId = $(this).parent().attr("id");

У элемента $(this) (в такой записи и контексте это window, что вернет undefined) находим родителя и получаем (а не задаем) аттрибут id у родителя

Второй этап

var text = $('#' + parentId +' h2').text();

В первом этапе мы получили id родителя, подставляем (конкратенируем) в селектор #найденное_id h2и у найденого заголовка h2 вложенного в родителя элемента $(this) получаем текст

Третий этап

$('<a>', { href: '#' + parentId, text: text}).appendTo(bookMarks);

Вставляем в конце каждого элемента (в виде дочернего последенего элемента) bookMarks (он видимо где то задан) тэг <a> с аттрибутом href="#наш_id_найден_на_этапе-1" и содержанием text, найденым на этапе 2 (вид будет вставляемой строки <a href="#наш_id">text который получили во втором пункте</a>)

Визуально как то так:

<div id="someid"> <!--этот айди мы ищем на первом этапе-->
  <div class="element"> <!-- предположительно у этого элемента мы ищем родителя, так как контекст $(this) не показан, что за элемента и что возвращает -->
  </div>
  <div class="other"></div>
  <h2>Этот заголовок мы ищем на втором этапе и получаем его содержание</h2>
</div>

<div class="mybookmark">
  <!-- в кажды букмарк будет в конце вставлен тег <a> -->
</div>


<div class="mybookmark">
  <!-- и сюда будет в конце вставлен тег <a> -->
</div>

<!--результат такого скрипта: -->
<div class="mybookmark">
  <a href="#someid">Этот заголовок мы ищем на втором этапе и получаем его содержание</a>
</div>

БЛОГ НА HUSL

JQUERY как работают строчки кода

Ответы (1 шт):