[jQuery] Интересни неща и задача 2 от Overview само след F5 в Mozilla


2

За интересните неща – отговорът ми по-долу. Ще бъде полезно да допълните с вашите открития за jQuery.

Здравейте,

Ето какво решение написах на втора задача от jQuery Overview, в която трябва да се добавят елементи преди или след определен елемент (в случая the div). След над два часа лутане, най-накрая се зарадвах, че тръгна, когато изведнъж спря да работи, без нищо да съм променял.

Оказва, че работи само в Mozilla, и то след като натисна F5, а понякога трябва да се натисне F5 няколко пъти, за да проработи. 

Изпратих го и на колега, който го пусна на неговия компютър – същата работа. 

Използвам jquery-2.1.1.min.js

Edit: И с други версии на jQuery e същата работа.

Защо се получава така?

Ето най-накрая и решението ми, което изпълнява условието на  втора задача коректно и работи независимо от желанието на Пешо: GitHub




Отговори



3

Е, може да си спокоен, не е от jQuery.. :>

Пиша ти го в JS Bin + добавям линк към jQuery тъй като не го е чувало за него.

Няма да те мъча, това е накратко: http://jsbin.com/penacala/1/edit

Втори вариант: http://jsbin.com/penacala/4/edit

Друг извратен вариант: http://jsbin.com/penacala/2/edit

Като начало ти замених after/before с append/prepend, след това вземам директно стойността $('#input').val(), защото в event.data.param2 няма нищо.

Нали знаеш, че повтарянето на код и трудното тестване не води до КПК. :>

Последен вариант: http://jsbin.com/penacala/6/edit

Поздрави!


от martin.nikolov (4535 точки)


0
Здравей, Марти, благодаря ти за отговора и труда. Мисля, че първият и вторият вариант не отговарят на условието, тъй като добавят елементите в самия див, а не като негови братя преди или след него. Сега ще погледна и нещата, които дописа. Защо мислиш, че не е от jQuery? Нали .before и .after са точно за това, а явно не работят.
Не бях видял, че има .insertBefore и .insertAfter, но ги изпробвах в моя код дори с хардкоднати стойности: $element.insertAfter("dsgfds"); и отново не работят. Аз не виждам друга причина, освен тези функции да не работят коректно, а ти?
П.п. Това отговаря на въпросите ми за insertBefore/insertAfter: "The elements must already be inserted into the document (you can't insert an element after another if it's not in the page." Но избирателното поведение на .before/.after засега не е оправдано. :)

от varbanoff (2325 точки)


4

Като много питам, пък да взема и да си отговоря официално, защото открих интересни неща, които може и да са полезни за изпита:

1. .InsertAfter() и .InsertBefore() работят само за елементи, които ги има в DOM дървото. Ако добавите $('selector').insertAfter('Pesho'), Пешо няма да се качи на дървото, защото такъв елемент няма.

2. .Before() и .After() не работят, ако не им се подадат като параметри валидни HTML елементи. Ако добавите $('selector').after("Pesho"), Пешо се качва на DOM дървото, но САМО ако използвате Mozilla, и само ако натиснете няколко пъти F5, и то ако самият Пешо иска да се качи. А кога иска си е негова работа.

3. Резултатът от .after или .before ($('<div />').html('Pesho')); не е div, в който е Пешо, а е два div-a – в единия е Пешо, а след него има още един див, в който няма никой.

4. Резултатът от .after или .before ($('<div>Pesho<div/>')); е такъв, какъвто се очаква да бъде – един див, в който е Пешо.

Второто ме наведе на мисълта, че и jQuery не е чак толкова cross-browser, колкото се води, че е. Последните ме наведоха на мисълта, че в jQuery дали ще се случи нещо очаквано или нещо неочаквано, се решава отново от Пешо...


от varbanoff (2325 точки)


0
Е и мен да ме накараш в 2:30 да се разхождам нагоре надолу и аз няма да искам :D

от TeodorTunev (3061 точки)

0
Ти ако знаеш от колко часа насам го карам, съвсем няма да искаш.... :)

от varbanoff (2325 точки)


4

Добре де, защо ползвате тия методи по толкова изчекнат начин? Не съм качвал нещата из нета че нямам време, но накратко:

Имам 5 div-а хардкоднати в началото. с цъкане на мишката избирам един, около който ще вмъквам - преди или след него. И ето какво пиша:

     $('#wrapper').find('#selected').before('<div>' + $('#text').val() + '</div>');

Което си се чете съвсем на английски:

"Във #wrapper"-а (един див дето държи 5-те хардкоднати див-а) намери оня, дет съм го селектнал (#selected), и преди (before) него постави един нов див в който има value-то на онуй, дет се казва #text"

Ако трябваше да ползвам insertBefore нещата щяха да са наобратно:

  ('<div>' + $('#text').val() + '</div>').inserBefore($('#wrapper').find('#selected'));

което се чете като "Ей туй дет е в скобите го сложи преди селектнатия елемент във рапър-а".

 В първия случай лявата част трябва да е съществуващ DOM елемент, във втория случай дясната част трябва да е съществуваща. Това е основната разлика.

 

от JulianG (5316 точки)


0
Е та цяла вечер толкова ли не ти се пиеше бира, та не каза? Аз вече си реших проблема... А защо толкова изчекнат начин – аз цял ден не мога да се начудя. Абстрактно мислене.... :))))

от varbanoff (2325 точки)


1

Здравейте колги,

И аз имам необясним за мен проблем с тази задача - прочетох всичко, което написахте но то не отговаря на:

защо това не работи??? 

http://pastebin.com/amCMxM5S

 

пробвах с before , insertbefore, prepend, prependTo със съответните им синтаксиси и chrome все дава грешка

"Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The new child element is null."

Защо новия елемет е null > ? нали го създавам и тогава го прикачвам??? 




0
Проблема ти идва от името на функцията , просто я кръсти по друг начин не insertBefore и ще работи

от TeodorTunev (3061 точки)

0
Сложи си един брейкппоинт в браузъра и виж каква му е стойността. А можеш и да го логнеш в конзолата, ако не ти се занимава с дебъгера на браузъра.

от stefanov2081 (40 точки)