« 1 2 »
Autor Zpráva
quatzael
Profil
Mám funkci na přeskupení elementů (seřazení podle hodnot v data-type). Všude to běží ok, jenom IE8 v těch přeskupovaných elementech udělá totální paseku. Vypadá to, že celou vnitřní strukturu těchto přeskupovaných elementů ignoruje a seřadí je totálně rozebrané na vnitřní elementy (element za element) pod sebe.

Stáhnul jsem si funkce, aby běžely metody .getElementsByClassName() a .forEach():

if(document) if(!document.getElementsByClassName)
document.getElementsByClassName = function(cl) {
  var retnode = [];
  var myclass = new RegExp('\\b'+cl+'\\b');
  var elem = document.getElementsByTagName('*');
  for(var i=0; i<elem.length; i++) {
    var classes = elem[i].className;
    if(myclass.test(classes)) retnode.push(elem[i]);
  }
  return retnode;
}

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  }
}

A mám tady tuhle funkci na to třídění:

 function sortOut(frequency) {
    var wrap = document.getElementById("offer-list");
    var classname = document.getElementsByClassName('offer-item');
    var divs = [];
    for (var i = 0; i < classname.length; ++i) {
        divs.push(classname[i]);
    }
    
    var freq = "data-price-" + frequency;

    divs.sort(function(a, b) {
    return +a.getAttribute(freq) - +b.getAttribute(freq);
    });
    divs.forEach(function(el) {
    wrap.appendChild(el); // TOHLE DĚLÁ TEN BORDEL!!
    });   
}                                 

Nevíte někdo prosím, kde by mohla být chyba? Jinak funkci spouštím až po načtení stránky:

   
$(document).ready(function(){
sortOut(frequencyValue);
});
juriad
Profil
Problém je v forEach. Viz tabulka kompatibility na konci https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
quatzael
Profil
juriad:
Problém je v forEach.
Vždyť jsem přece psal, že jsem to vyřešil tou vlastní funkcí forEach() (13. řádek v tom prvním kódu)


A navíc to se zdá, že funguje ok. Jen ten appendChild zlobí..


Teď mě trochu napadá, že vlastně nevím co tam dělá ten parametr el.. Ale všude jinde to normálně funguje.
_es
Profil
quatzael:
Akosi to na prvý pohľad nedáva zmysel. Na čo tam tú metódu forEach vlastne máš? Prečo nepristupuješ k poľu ako predtým - cez jeho indexy? Okrem toho, metóda getElementsByClassName nefunguje v niektorých starších prehliadačoch.
quatzael
Profil
_es:
Na čo tam tú metódu forEach vlastne máš?
Abych seřadil postupně všechny elementy.

Prečo nepristupuješ k poľu ako predtým - cez jeho indexy?
No, to moc nevím jak.. Zase nějak pomocí cyklu for?

Okrem toho, metóda getElementsByClassName nefunguje v niektorých starších prehliadačoch.
Právě proto jí tam mám v kódu pro tyto případy definovanou. Hned jako první. Hned za tím je to forEach..
_es
Profil
quatzael:
Abych seřadil postupně všechny elementy.
Na to je predsa metóda sort.
quatzael
Profil
_es:
Tahle funkce přece seřazuje pole, ne?
Já potřebuju seřadit elementy <div> podle data-type..
_es
Profil
quatzael:
Já potřebuju seřadit elementy <div> podle data-type..
No tak si ich priraď do poľa a zoraď podľa data-type. Na to máš predsa v metóde sort ten prvý argument - funkciu, aby si mohol zoradiť prvky poľa podľa hocičoho, čo ťa napadne.

9. riadok druhého kódu je nezmyselný, lebo frequency má byť funkcia a súčet textového reťazca a funkcie je logický nezmysel.

Naštuduj si niekde zoraďovanie prvkov poľa.
quatzael
Profil
_es:
Ale já ty elementy prostě potřebuju přeskupit. O seřazení hodnot nejde, to mi tam funguje. Já potřebuju, aby se ty elementy seřadily = znovu zobrazily v novém pořadí. To nemá s polem vůbec nic co dělat..
_es
Profil
quatzael:
Ale já ty elementy prostě potřebuju přeskupit.
Ach jaj:
1) Prvky, čo chceš zoradiť, si uložíš všetky do poľa.
2) Potom pole zoradíš metódou sort s vhodným argumentom - funkciou, tak, aby bolo výsledné poradie také, aké chceš.
3) Zoradené pole použiješ podľa ľubovôle. Ak sú trebárs prvkami nejaké DOM objekty, tak ich popremiestňuješ na iné miesto v DOM strome.
Chamurappi
Profil
Jsem snad jediný, kdo vidí zdrojový kód nahoře? Když to shrnu:
1) Je v něm doskriptovaná metoda Array.prototype.forEach pro prohlížeče, které ji neznají.
2) Je v něm podobným způsobem doskriptovaná i metoda document.getElementsByClassName. (I když moc nerozumím podmínce if(document)…)
3) Vyhledané elementy se přesypou do pole, pole se následně řadí metodou sort (pomocí anonymní funkce porovnávající hodnoty atributů data-price-řetězec) a po seřazení se forEachem s appendChildem postupně sypou do wrapu.


Reaguji na quatzaela:
Nevíte někdo prosím, kde by mohla být chyba?
Nevím, ale na první pohled moc nedůvěřuji tvé diagnóze, že je chyba v appendChildu.
Ověřil sis, že je divs seřazené správně? A že je na začátku správně naplněné? Je možné, že jedna z těch doskriptovaných metod funguje jinak, než originál v jiných prohlížečích.

Vypadá to, že celou vnitřní strukturu těchto přeskupovaných elementů ignoruje a seřadí je totálně rozebrané na vnitřní elementy (element za element) pod sebe.
Tomu asi nějak nerozumím. Možná by se hodila živá ukázka.

Edit: Ahá, už možná rozumím.
Reguláru /\boffer-item\b/ vyhovuje totiž i řetězec offer-item-trumpeta (před pomlčkou je také konec slova), takže tvůj náhradní document.getElementsByClassName pravděpodobně nachází i elementy s jinými třídami, stačí, aby začínaly na offer-item-. Proč vlastně potřebuješ hledat elementy podle třídy? Jestli mají společného rodiče, tak to nepotřebuješ. Sám jsem v praxi getElementsByClassName nikdy nepoužil…
_es
Profil
Chamurappi, quatzael:
Myslím, že metóda forEach už z princípu svojho fungovanie nezaručuje poradie prvkov, na ktoré bude aplikovaná funkcia v jej argumente - teda je nesprávne sa sťažovať, že nejaké poradie nedodržala.

Na môj vkus to je nejaké bezdôvodne neprehľadné a zložité a chcelo by to celé prerobiť a s prvkami poľa pracovať vždy „normálne“ - cyklom cez jeho indexy.
Chamurappi
Profil
Reaguji na _es:
Myslím, že metóda forEach už z princípu svojho fungovanie nezaručuje poradie prvkov
Nativní implementace by ho zaručovat měla, není to stejné jako u for-in. Doskriptovaná varianta ve zdejším prvním příspěvku pořadí též dodrží (od nativní se liší zřejmě tím, že volá funkci i na neexistujících prvcích).
quatzael
Profil
Chamurappi:
Ta metoda getElementsByClassName není můj výtvor. Z mý strany to bylo čistě jen CTRL + C, CTRL + V..
A jak by měl teda ten regulár správně vypadat, aby to fungovalo?

Proč vlastně potřebuješ hledat elementy podle třídy? Jestli mají společného rodiče, tak to nepotřebuješ.
Tak společnýho rodiče mají, případně by nebyl problém, aby měly, ale co potom s tím? Jakou jinou metodou je mám vybrat?
weroro
Profil
quatzael:
A jak by měl teda ten regulár správně vypadat, aby to fungovalo?
Ja som pred časom v inej téme postol toto Více blikajících textů na stránce.. Chamurappi sa nevyjadril, takže to nebolo také strašné prevedenie. // alebo bola škoda vyjadrovať sa //
_es
Profil
quatzael:
Jakou jinou metodou je mám vybrat?
Napríklad childNodes.
quatzael
Profil
weroro:
Ja som pred časom v inej téme postol toto Více blikajících textů na stránce..
To mi nefunguje vůbec, zkusil jsem tam dát ten regulár z toho a výsledek je ten, že se ty elementy nezobrazí vůbec..
new RegExp("(^|\s)" + cl+ "(\s|$)");



_es:
Napríklad childNodes.
Zkusím to..


_es:
Tak jsem teda zkusil nahradit původní var classname = document.getElementsByClassName('offer-item'); nově na:
var classname = wrap.childNodes;

Ale nefunguje to, hodí to chybu: Objekt neumožňuje použití vlastnosti či metody getAttribute u řádku:
return +a.getAttribute(freq) - +b.getAttribute(freq);



_es:
Jak ta metoda childNodes vůbec funguje?? Vybírá jen přímé potomky (elementy o úroveň níž) nebo všechny?
_es
Profil
quatzael:
Vybírá jen přímé potomky (elementy o úroveň níž) nebo všechny?
Vyberá všetky, aj nepriame.

hodí to chybu: Objekt neumožňuje použití vlastnosti či metody getAttribute u řádku:
Asi budeš musieť overovať, o aký typ uzlu ide. Textové uzly asi neumožňujú ukladanie atribútov. Prečo si nezistíš, čo bolo v a a b?
quatzael
Profil
_es:
Vyberá všetky, aj nepriame.
No tak to je ale dost podstatný, já tam mám hodně složitou strukturu v každým elementu. Neexistuje něco, co opravdu funguje na můj případ?
quatzael
Profil
Chamurappi:
Tak jsem tam zkusil ten regulární výraz přepsat na:
var myclass = new RegExp("(?:^|\\s)" + cl+ "(?:$|\\s)");

Teď mi to v IE11 funguje, ale bohužel to už teď nemám možnost otestovat na IE8.

Já těm regulárním výrazům nerozumím, zatím jsem se ještě nestihl naučit a nikde je pořádně nevysvětlujou, ale nechápu proč to v každým kódu napíšou jinak. Přece je jasný, že element může mít více tříd a jednotlivé třídy jsou odděleny mezerami, tak proč tam nedají nějaký regulární výraz, který se hodí na třídy, neměly by tam být žádný složitosti, ne?
1Pupik1989
Profil
Tak tedy nevím jak ostatním, ale mě to vybírá jen přímé. Musíš ale filtrovat co jepotomek a co textový potomek. Mrkni na dokumentaci. To že ti to nevrátí přímého potomka je blbost.
Chamurappi
Profil
Reaguji na quatzaela:
Vybírá jen přímé potomky (elementy o úroveň níž) nebo všechny?
Jen přímé. Včetně textových uzlů, nejen elementy. Do divs dávej jen ty, které mají (třeba) tagName.

bohužel to už teď nemám možnost otestovat na IE8
V nástrojích pro vývojáře si můžeš přepnout režim na osmičku. V tomto případě by měl odpovídat chování skutečné osmičky.

tak proč tam nedají nějaký regulární výraz, který se hodí na třídy
Je možné, že lidé, kteří by to uměli napsat správně, hledat podle tříd moc často nepotřebují, takže si tuto funkci sestavují svépomocí ostatní.

Zkusím to..
Mimochodem, diskuse není chat. Nejdřív si rozmysli, co chceš napsat a pak to napiš najednou, v kuse. Informace, že něco zkusíš, není tak důležitá, abys ji vůbec musel psát…
Pokud do příspěvku po odeslání doplníš něco podstatného, riskuješ, že si to nikdo nepřečte. (Příspěvky zaslané v krátkém sledu se spojují do jednoho právě proto, aby to neobtěžovalo.)
_es
Profil
Chamurappi:
Jen přímé. Včetně textových uzlů, nejen elementy.
Moja chyba za zlú informáciu. Overil som si počet vrátených uzlov voči metódou children, ktorá má však nedostatočnú podporu, preto som mylne predpokladal, že sa vrátia aj nepriame uzly.

quatzael:
Včetně textových uzlů, nejen elementy.“ ([#22] Chamurappi)
Textové uzly môžeš odstrániť tak, že v HTML kóde medzi HTML značkami nič nebude, ani medzera ani koniec riadka.
1Pupik1989
Profil
Nebo to vyfiltrovat v cyklu pomocí vlastnosti potomků potomek.nodeType == 2. Tedy pokud si to dobře pamatuji.
quatzael
Profil
1Pupik1989, _es, Chamurappi:
Jen přímé. Včetně textových uzlů, nejen elementy. Do divs dávej jen ty, které mají (třeba) tagName.

Jenže jak to mám teda vyfiltrovat, aby to nebralo ty textový nody? Upravovat HTML kód kvůli tomuhle a mazat tam všechny konce řádků je přece nesmysl..

Chamurappi:
V nástrojích pro vývojáře si můžeš přepnout režim na osmičku. V tomto případě by měl odpovídat chování skutečné osmičky.
To sice možná jo, ale chová se to úplně jinak v tom, že se to celý drbe, mrzne to a nemám tu trpělivost u toho sedět hodiny a čekat co bude. Já nevím jestli to někomu funguje normálně, ale mě když to narazí na nějakou chybu, tak místo toho, aby to upozornilo co je to za chybu tak to začne hrabat a je lepší to radši vypnout..

Je možné, že lidé, kteří by to uměli napsat správně, hledat podle tříd moc často nepotřebují
Proč by to nepotřepovali? To, že lze udělat i nějaké jiné řešení neznamená, že je to lepší, ne? Co je na getElementsByClassName tak špatnýho (kromě toho, že to nepodporují starší verze IE), že by stálo za to, se tomu vyhnout..?
_es
Profil
quatzael:
Jenže jak to mám teda vyfiltrovat, aby to nebralo ty textový nody?
Zisťovať v cykle, o aký uzol ide a podľa toho ho do toho poľa priradiť alebo nepriradiť. Viď prvú radu v [#22]. Ak ide o textový uzol, bude uzol.tagName===undefined, ak pôjde o DIV (jedno či <div> alebo <DIV>), bude uzol.tagName==="DIV".
quatzael
Profil
_es , Chamurappi:
Takhle to vypadá, že to funguje. Testoval jsem to i pomocí F12 na IE8 a vypadá to ok.
Díky moc.
quatzael
Profil
Chamurappi:
Tak definitivně potvrzuju, že daný problém je vyřešen a funguje i na IE8 (odzkoušel jsem to na živo).

Ale není pravda, že vývojářské prostředí IE věrně simuluje i starší verze. CSS zobrazuje jinak než ve skutečnosti (jinak je to v IE8 na živo a v IE8 v F12) a taky mi živý IE8 hází chybu ve skriptu:

  
  $(function() {
        $("#date").datepicker({
            changeMonth: true,
            changeYear: true,
            maxDate: "-18Y",
            yearRange: "1900:2100",  //tady mu vadí ta poslední čárka (zřejmě), jinak na té simulaci IE8 si z toho vůbec nic nedělá..
     
        });
    });
anonymníí
Profil *
quatzael:
ano, ta čárka tam nemá co dělat. Jestli to někde funguje, není zaručeno, že to bude fungovat vždy a všude.
_es
Profil
quatzael:
tady mu vadí ta poslední čárka (zřejmě)
Tak prečo ju nedáš preč? Nemá tam čo robiť, je to syntaktická chyba a to, že si ju niektoré prehliadače „odmyslia“, neznamená, že to je správne.
« 1 2 »

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: