[JS App] Домашно jQuery Overview - 2 Задача - Element Adding


1

Какво точно се има в предвид по:

Using jQuery implement functionality to insert a DOM element before or after another element.

Че трябва добавените елемените да са siblings на дадения елемент ? Или нещо друго ?

Малко ми е странна тази задача т.к. има готови функция в JQuery за това и ми се струва прекалено лесно :D




Отговори



1

И аз първоначално като я прочетох ми се стори лесно, и се зачудих да няма някаква уловка. 

Това ми хрумва на първо четене, не знам дали работи, не го пусках в браузъра

И - да, и аз така го разбирам, трябва добавения елемент да е sibling на дадения

var Element = {
      init: function(element) {
      this.element = element;
}
//.......
      insertAfter: function(selector) {
      $(this.element).insertAfter($(selector));
     }
}
 
var current = Object.create(Element);
current.init("<p></p>");
current.insertBefore("#nav");
current.insertAfter("li.item");

от pdrenovska (2196 точки)


3

Решение: source, demo.

Имам два бутона и им закачам при кликване да се създаде нов елемент и да се добави съответно преди/след дадения.

Ето как jQuery улеснява DOM манипулацията:

  • $('#button').click(function() { ... }) - като document.querySelector('#button').addEventListener('click', function() { ... })
  • $('<div />') - като document.createElement('div')
  • newEl.insertAfter(otherEl) - като otherEl.parentNode.insertBefore(newEl, otherEl.nextElementSibling) (когато nextElementSibling е null, автоматично го слага накрая)

Методите са симетрични, т.е. newEl.insertAfter(otherEl) e същото като otherEl.after(newEl). Ето и останалите подобни:

  • prepend: prependTo - Добавя елемента като first-child на родителя
  • append: appendTo - Добавя елемента като last-child на родителя
  • before: insertBefore - Добавя елемента като previous-sibling на родителя
  • after: insertAfter - Добавя елемента като next-sibling на родителя

от jasssonpet (6814 точки)


2

Аз съм направил едно текстово поле, в което, чрез цсс селектор си избираш някой, от няколкото предварително сложени в сайта елемента, след или преди който да добавяш. После в падащо меню с няколко опции си избираш какъв да е видът елемент, който вмъкваш. И с бутони за преди и след със закачени функции вмъкваш съответния елемент, където си избрал. Ползвам за вмъкването before() и after() .

Задачка.


от tankovski (2828 точки)


0
и аз си мислех за нещо подобно, само че менюто с двата бутона за before&after и падащото меню да е закачено на всеки елемент и като минеш с мишката над него и той да се показва

от pdrenovska (2196 точки)

0
Абе и аз мислех няк'ви подобни чудесии, ама и без друго едвам смогвам с времето.

от tankovski (2828 точки)


0

Аз пък си extend-нах прототипа на jQuery като му добавих 2 функции - appendNewElement и prependNewElement които взимат като параметър елемента, който искаме да добавим и използвам after() и before(). Това доста улеснява използването - например:

$('.elementToSurround').appendNewElement(elementToAppend);

добавя elementToAppend след елемента с клас elementToSurround.

Source

 


от gallumbits (2371 точки)


2

Май установих какво се случва. По време на лекцията, Дончо показваше демото за добавяне на елементи с prepend/append, които добавят елемента като пръв/последен на родителя. Някой попита дали може елемента да бъде добавен преди/след точно определен елемент, на което Дончо отговори, че няма метод който да прави точно това, но може да се направи с комбинация от няколко метода. Вижте тук (уж го нагласих да пуска видеото в точния момент, но в мозилата го пуска от началото; пуснете си го от 0:48:20).

Явно след това е решил да ни даде за домашно да напишем методи които да правят точно това. Да, ама:

http://api.jquery.com/insertBefore/

http://api.jquery.com/insertAfter/


от vphilipov (3591 точки)


0

И аз задачката я направих с insertBefore / After.Правя един елемент с #element, два бутона #before, #after и им закачам по един евент:

   $("#before").click(function myfunction() {
        $("<div></div>").insertBefore($("#element"));

    })

и

    $("#after").click(function myfunction() {
        $("<div></div>").insertAfter($("#element"));
 }) 
 

от iwitass (3695 точки)