Управление DOM-элементами с помощью jQuery и цепочки

Question

Немного поигрался с jQuery (извините, полный нуб). Мне было интересно, почему это не работает.Может быть, я не понимаю, как работает цепочка, контекст и манипулирование DOM, но мне просто любопытно.Вот так:

$("#myDiv")
    .append("h3")
    .append("a")
    .attr("href", "http://example.com")
    .text("Click here")
    .end();

То, что я ожидал бы получить:

• Выбрать #myDiv
• Вставить в него H3
• Затем внутри H3 вставьте тег A
• Установите для атрибута HREF тега A URL-адрес
• , а затем установите для текста тега A значение «Click Here»

Вместо этого разметка моей страницы, кажется, полностью испорчена, хотя я не вижу динамического DOM, поэтому я не уверен, что происходит.Я неправильно читаю документацию по jQuery?

Answer 1

должно быть

$("#myDiv")
    .append("<h3>").children('h3:last')
    .append("<a>").children('a:last')
    .attr("href", "http://example.com")
    .text("Click here")

Каждый метод возвращает исходный объект jQuery, над которым он был выполнен (, за исключением обхода таких, как find, children и т. Д. ), поэтому вы можете продолжить работу с ними .

Я полностью удалил .end(), поскольку это полезно только в том случае, если вы используете методы обхода, которые изменяют объект jQuery.

---

Таким образом, ваш исходный код ( помимо ошибки, что html в append нуждается в тегах, если вы хотите добавить теги ) добавит h3 к #myDiv, а затем снова добавит a на #div, затем установите атрибут href на #myDiv и, наконец, установите его текст - текст #myDivs;) .

Все будет сделано на #myDiv.

Answer 2

Вот, пожалуйста:

$('#myDiv')
    .append($('<h3>')
        .append($('<a>')
            .text('Click here')
            .attr('href', 'http://example.com')));

Живая демоверсия: http://jsfiddle.net/HNMET/1/

Обратите внимание, что DOM манипулируется с только один раз (= когда элемент H3 добавляется к DIV).

---

Поскольку приведенный выше код немного сложен (я думаю, это немного сбивает с толку), я разбил его на 3 строки. Обратите внимание, что это практически тот же код, я добавил только две «вспомогательные» переменные, чтобы сделать его более читабельным:

var anchor, h3;

anchor = $('<a>').text('Click here').attr('href', 'http://example.com');
h3 = $('<h3>').append( anchor );
$('#myDiv').append( h3 );

Демонстрационная версия: http://jsfiddle.net/HNMET/11/