Hjälp med javascript - dölj en viss förekomst av span-tagg

Permalänk

Hjälp med javascript - dölj en viss förekomst av span-tagg

Hej!

På min sida finns förekomster av följande rad:

<span class="amount">1 image</span>

Kan någon hjälpa mig med en function som tar bort eller döljer förekomsten av exakt ovanstående?

Permalänk
Medlem

Är nästan alltid bättre att använda <div> istället för <span> för detta ändamål. Sen kan jag tipsa om sökning på stackoverflow, där finns svaret till det mesta.

https://stackoverflow.com/questions/7129305/java-script-funct...

Permalänk
Medlem

Ska du bara dölja dom, alla med den klassen?

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Permalänk

@Svertel tack för tipset, men dessvärre är sidan redan byggd på det viset att det är <span> som används.

@Sonywalk tack, men det är bara när den innehåller texten "1 image" som den ska bort. I andra fall står det i plural, tex 4 images, och då vill jag behålla den.

Permalänk
Testpilot
Skrivet av Haider of Sweden:

det är bara när den innehåller texten "1 image" som den ska bort. I andra fall står det i plural, tex 4 images, och då vill jag behålla den.

Lägg till en liten if-sats och jämför med hjälp av innerHTML:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Permalänk
Medlem
Skrivet av hunden:

Lägg till en liten if-sats och jämför med hjälp av innerHTML:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Aaaaw, ändrade mitt så hade du skrivit när jag sparat Haha

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Permalänk
99:e percentilen
Skrivet av Haider of Sweden:

Hej!

På min sida finns förekomster av följande rad:

<span class="amount">1 image</span>

Kan någon hjälpa mig med en function som tar bort eller döljer förekomsten av exakt ovanstående?

Skrivet av Haider of Sweden:

@3m0l tack för tipset, men dessvärre är sidan redan byggd på det viset att det är <span> som används.

@Sonywalk tack, men det är bara när den innehåller texten "1 image" som den ska bort. I andra fall står det i plural, tex 4 images, och då vill jag behålla den.

Så här skulle man kunna göra:

function hide(element) { element.style.display = "none"; } const SELECTOR_AMOUNT = ".amount"; const REGEX_ONE_IMAGE = /^1 image$/; const amountElements = document.querySelectorAll(SELECTOR_AMOUNT); const oneImageElements = amountElements.filter(element => REGEX_ONE_IMAGE.test(element.textContent)); oneImageElements.forEach(hide);

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk

@Sonywalk, @Hunden: jag förstår exakt vad den gör, men det händer dessvärre inget.
Se länken nedan där jag försökte dölja texten "15 images" (har ändrat i skriptet) utan framgång:
http://haider.se/portfolio/

Permalänk
Medlem
Skrivet av Haider of Sweden:

@Sonywalk, @Hunden: jag förstår exakt vad den gör, men det händer dessvärre inget.
Se länken nedan där jag försökte dölja texten "15 images" (har ändrat i skriptet) utan framgång:
http://haider.se/portfolio/

Kallar du på funktionen då?
Typ längst ner på sidan
.....

<script> function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } } hideSpan(); </script> </body>

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Permalänk

Toppen, det funkade nu. Trodde att funktionen laddades automatiskt, men inser att jag tänkt fel.

Skulle jag kunna be om en sista ynnest?
Det finns en till tagg som behöver döljas, men den saknar class-namn

<span>0 images</span>

Permalänk
Medlem

Måste det vara Javascript?
Jag hade personligen aldrig lagt in det eftersom man kan göra så mycket med CSS

.img-link figcaption {
display: none;
}

Detta funkar att köra!

Visa signatur

| Stationär: 6900 XT, 5800X3D | Laptop: Asus UX32A | Nas: Synology DS1813+ | Smarthem: Homey |

Permalänk
Medlem
Skrivet av Haider of Sweden:

Toppen, det funkade nu. Trodde att funktionen laddades automatiskt, men inser att jag tänkt fel.

Skulle jag kunna be om en sista ynnest?
Det finns en till tagg som behöver döljas, men den saknar class-namn

<span>0 images</span>

Blir ju liknande.

Antar att det alltid kommer stå "0 images"?

function hideSpans(){ var elements = document.getElementsByTagName('span'); for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "0 image"){ elements[i].style.display = "none"; } } }

Ska du helt enkelt gömma alla spans som innehåller "0 image" eller "1 image" kan du slå ihop dom.

function hideSpans(){ var elements = document.getElementsByTagName('span'); for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image" || elements[i].innerHTML == "0 image" ){ elements[i].style.display = "none"; } } }

Kalla på den: hideSpans();

Den går genom att span-taggar, och dom som bara innehåller "0 image" eller "1 image" göms.

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Permalänk

@lolpold: det hänger på innehållet Javascript tycks vara enda sättet att pricka in rätt element och dölja det.

@Sonywalk Snyggt. Nu verkar det som om jag stött på ett hinder som vi kanske inte har kontroll över. Den förekomst av "0 images" finns i menyn. Om du håller musen över Portfolio kommer du se det till höger.
I Chrome kan jag inspektera och hitta förekomsten i koden, dock inte i View Page Source. Kanske skapas menyn på ett annat sätt varför vi inte kan komma åt den med javascript.

Permalänk
Medlem
Skrivet av Haider of Sweden:

@lolpold: det hänger på innehållet Javascript tycks vara enda sättet att pricka in rätt element och dölja det.

@Sonywalk Snyggt. Nu verkar det som om jag stött på ett hinder som vi kanske inte har kontroll över. Den förekomst av "0 images" finns i menyn. Om du håller musen över Portfolio kommer du se det till höger.
I Chrome kan jag inspektera och hitta förekomsten i koden, dock inte i View Page Source. Kanske skapas menyn på ett annat sätt varför vi inte kan komma åt den med javascript.

Ser direkt vad problemet är.
Javascript tar bort element med texten "0 image", i menyn står det "0 images"

function hideSpans(){ var elements = document.getElementsByTagName('span'); var remove = ["1 image", "0 image", "0 images"]; //Lägg till värden här for (var i = 0; i < elements.length; i++){ var innerhtml = elements[i].innerHTML; if(remove.indexOf(innerhtml) != -1){ elements[i].style.display = "none"; } } }

Nu gömmer den alla spans som innehåller nått av värdena i listan "remove".
"1 image", "0 image" och "0 images"

Bästa skulle ju självklart vara att ni löser så att dessa element inte genereras, eller är gömda direkt när de skapas

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Permalänk

Tack så mycket @Sonywalk och alla andra som hjälpte till.
Ni blev veckans hjältar för mig

Rörande menyn och hur den genereras så håller jag på o reder ut det med tillverkaren av mjukvaruutvecklaren.

En modifikation av det förra skriptet uppdaterades till att översätta texten "images" till "bilder", dock blev allt vitt. Någon aning om varför?

function hideSpans(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } else { elements[i].innerHTML = str.replace('images', 'bilder'); } } }

Permalänk
Medlem
Skrivet av Haider of Sweden:

Tack så mycket @Sonywalk och alla andra som hjälpte till.
Ni blev veckans hjältar för mig

Rörande menyn och hur den genereras så håller jag på o reder ut det med tillverkaren av mjukvaruutvecklaren.

En modifikation av det förra skriptet uppdaterades till att översätta texten "images" till "bilder", dock blev allt vitt. Någon aning om varför?

function hideSpans(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } else { elements[i].innerHTML = str.replace('images', 'bilder'); } } }

function hideSpans(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } else { elements[i].innerHTML = elements[i].innerHTML.replace('images', 'bilder'); } } }

?

Visa signatur

Ryzen 5600X | MSI Tomahawk | GTX 3070

Permalänk

Right on!
Tack för hjälpen.

Permalänk
Medlem

Radera/utkommentera hellre renderingen utav detta element för att följa best practice.

Visa signatur

Jag ansvarar för vad jag skriver, inte för vad du förstår.
Förlåt, jag hörde inte vad du tänkte säga.

Permalänk
99:e percentilen
Skrivet av Sonywalk:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Skrivet av hunden:

function hideSpan(){ var elements = document.getElementsByClassName("amount") for (var i = 0; i < elements.length; i++){ if(elements[i].innerHTML == "1 image"){ elements[i].style.display = "none"; } } }

Skrivet av Sonywalk:

function hideSpans(){ var elements = document.getElementsByTagName('span'); var remove = ["1 image", "0 image", "0 images"]; //Lägg till värden här for (var i = 0; i < elements.length; i++){ var innerhtml = elements[i].innerHTML; if(remove.indexOf(innerhtml) != -1){ elements[i].style.display = "none"; } } }

Dold text

Får jag i all vänlighet föreslå att vi inte indirekt lär ut eller uppmuntrar användning av == och !=?

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Testpilot
Skrivet av Alling:
Dold text

Får jag i all vänlighet föreslå att vi inte indirekt lär ut eller uppmuntrar användning av == och !=?

Menar du att jag borde använt === istället eller finns det bättre funktioner för strängjämförelser i Javascript kanske?

I PHP finns funktionen strpos som ger positionen av en sträng i en annan som jag har förstått ger bäst prestanda. Där måste man däremot använda den med === för att kunna skilja på position 0 som innebär att strängen hittades mot false som innebär att strängen inte hittades alls.

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Permalänk
Medlem
Skrivet av hunden:

Menar du att jag borde använt === istället eller finns det bättre funktioner för strängjämförelser i Javascript kanske?

I PHP finns funktionen strpos som ger positionen av en sträng i en annan som jag har förstått ger bäst prestanda. Där måste man däremot använda den med === för att kunna skilja på position 0 som innebär att strängen hittades mot false som innebär att strängen inte hittades alls.

Vet faktiskt inte varför den stora massan JavaScript-utvecklare ända sedan början har använt och bidragit till att använda den dåliga varianten gentemot den avsedda varianten. Detta är säkerligen inte något som skribenten avser att påpeka till dig personligen, utan det har varit ett problem länge att folk som kodar JavaScript sprider det sättet att göra. Du kanske redan vet vad jag åsyftar, fast kan posta ändå till de som inte ännu vet.

Denna tabell sammanfattar väl ganska bra problemet med att använda ==:
http://dorey.github.io/JavaScript-Equality-Table/

Det går utmärkt att jämföra med == när man vet garanterat att typerna är samma. Fast under den premissen så ser jag inte syftet med att använda == överhuvudtaget. Tumregeln egentligen är att alltid använda === och !== jämt. Boken "JavaScript The Good Parts" tar upp denna poäng också i Appendix B.
http://bdcampbell.net/javascript/book/javascript_the_good_par...

Detta kallas type coercion för övrigt, https://stackoverflow.com/questions/19915688/what-exactly-is-...

Permalänk
99:e percentilen
Skrivet av hunden:

Menar du att jag borde använt === istället eller finns det bättre funktioner för strängjämförelser i Javascript kanske?

Menar att det i allmänhet är best practice att helt undvika == och != (utom möjligen i vissa specialfall), och att vi ska använda === och !== istället.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Testpilot
Skrivet av Alling:

Menar att det i allmänhet är best practice att helt undvika == och != (utom möjligen i vissa specialfall), och att vi ska använda === och !== istället.

Då är jag med, får väl erkänna att jag ofta slarvar med det på grund av gammal vana. Är det specifikt för just JavaScript att det ofta används fel? Jag gör ju på fel sätt i PHP med oftast.

Just när det kommer till strängjämförelser, är det best practice att använda === ? Det finns inte nån strängfunktion som egentligen anses vara bättre?

Skickades från m.sweclockers.com

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Permalänk
Medlem
Skrivet av hunden:

Då är jag med, får väl erkänna att jag ofta slarvar med det på grund av gammal vana. Är det specifikt för just JavaScript att det ofta används fel? Jag gör ju på fel sätt i PHP med oftast.

Just när det kommer till strängjämförelser, är det best practice att använda === ? Det finns inte nån strängfunktion som egentligen anses vara bättre?

Skickades från m.sweclockers.com

Vågar inte uttala mig om alla språk, fast PHP åtminstone som du nämner har samma dilemma också.

Antar att du syftar på scenariot som där man i Java behöver använda metoden .equals() för annars jämför den referenser snarare snarare än vanliga värden. Det är annorlunda i JavaScript då strängarna är primitiva typer snarare än objekt.

Fast det finns däremot en inbyggd klass i JavaScript också som heter String. Provade lite i konsolen och såg att det är samma som i Java där:

new String("str") === new String("str") new String("str") == new String("str")

Båda två ger false.
I detta fall måste man använda valueOf för att jämföra objektens innehåll. Jag vet inte vilka scenarion man hellre använder String än den vanliga primitiva strängtypen i JavaScript dock.

Permalänk
99:e percentilen
Skrivet av MrDoggo:

Fast det finns däremot en inbyggd klass i JavaScript också som heter String. Provade lite i konsolen och såg att det är samma som i Java där:

new String("str") === new String("str") new String("str") == new String("str")

Båda två ger false.
I detta fall måste man använda valueOf för att jämföra objektens innehåll. Jag vet inte vilka scenarion man hellre använder String än den vanliga primitiva strängtypen i JavaScript dock.

Jag tror att den generella rekommendationen är att inte använda String för att skapa strängar alls, utan att hålla sig till vanliga primitiva strängar.

En primitiv sträng är väsensskild från ett String-objekt. String returnerar ett objekt när den används som en konstruktor (dvs med new), men en primitiv sträng annars:

"hej" === new String("hej"); // false "hej" === String("hej"); // true "hej" instanceof String; // false new String("hej") instanceof String; // true typeof "hej"; // "string" typeof new String("hej"); // "object"

Jag använder aldrig varken String("hej") eller new String("hej").

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Testpilot
Skrivet av MrDoggo:

Antar att du syftar på scenariot som där man i Java behöver använda metoden .equals() för annars jämför den referenser snarare snarare än vanliga värden. Det är annorlunda i JavaScript då strängarna är primitiva typer snarare än objekt.

Nej jag syftar på den vanliga strängtypen i JavaScript, som jag nu lärde mig kallas primitiv.
Tänkte bara på om jag missat nått smartare/mer effektivt sätt att jämföra på, med en funktion då exempelvis, men jag har nog blandat ihop det med nått annat

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Permalänk
99:e percentilen
Skrivet av hunden:

Nej jag syftar på den vanliga strängtypen i JavaScript, som jag nu lärde mig kallas primitiv.
Tänkte bara på om jag missat nått smartare/mer effektivt sätt att jämföra på, med en funktion då exempelvis, men jag har nog blandat ihop det med nått annat

Om man bara vill avgöra om två primitiva strängar är lika – alltså består av samma text – använder man ===. Mer generella checkar kan göras med regular expressions (regex):

// Matcha en sträng som består av valfritt nollskilt antal siffror, sedan ett mellanslag, sedan "image" och slutligen ett valfritt "s": const REGEX = /^\d+ images?$/; REGEX.test("0 image"); // true REGEX.test("0 images"); // true REGEX.test("1 image"); // true REGEX.test("1 images"); // true REGEX.test("2 image"); // true REGEX.test("2 images"); // true REGEX.test("007 image"); // true REGEX.test("007 images"); // true REGEX.test("45 image"); // true REGEX.test("45 images"); // true REGEX.test(" 45 images"); // false REGEX.test("almost 45 images"); // false REGEX.test("images"); // false REGEX.test("45"); // false

Och om vi inte vill matcha felaktig grammatik eller inledande nollor:

// Matcha en sträng som består av något av följande: // - en siffra som ej är 1, sedan mellanslag och sedan "images" // - en siffra som ej är 0, sedan valfritt nollskilt antal siffror, sedan ett mellanslag och sedan "images" // - "1 image" const REGEX = /^(([02-9]|[1-9]\d+) images|1 image)$/; REGEX.test("0 image"); // false REGEX.test("0 images"); // true REGEX.test("1 image"); // true REGEX.test("1 images"); // false REGEX.test("2 image"); // false REGEX.test("2 images"); // true REGEX.test("007 image"); // false REGEX.test("007 images"); // false REGEX.test("45 image"); // false REGEX.test("45 images"); // true

Att skriva regex är en konst och det går säkert att göra det bättre och snyggare än jag gjort här.

Visa signatur

Skrivet med hjälp av Better SweClockers