ugrás a tartalomhoz

css szülő elem keresése

sandrosdj · 2013. Szep. 8. (V), 01.17
Üdv!

Az akarom elérni css, esetleg sima js (nem jquery stb) használatával, hogy egy adott elem x-edik szülőjének (parent) változtathassam a paramétereit.

A felépítés valami ilyesmi:
<div class='story'>
 <div class='av'></div>
 <div class='container'>
  <h1>Story neve</h1>
  <p>Blah blah blah</p>
  <a href='/sajt'>Sajt</a>
 </div>
</div>
Tudni kell: nem minden .story-ban van /sajt-ra mutató link.
Amelyikekben VAN, ott el akarom rejteni az egész .story-t (display:none).

Miként lehet ezt kivitelezni a fent írtak használatával?
‹ Keresőmotor változtatása iOS-en weboldalból indítva. LightZAP ›
 ■
1

var stories =

Joó Ádám · 2013. Szep. 8. (V), 01.52
var stories = document.getElementsByClassName('story');

for (var i = 0, l = stories.length; i < l; i++) {
    var links = stories[i].getElementsByTagName('a');

    for (var j = 0, k = links.length; j < k; j++) {
        if (links[j].getAttribute('href') === '/sajt') {
            stories[i].classList.add('hidden');
            break;
        }
    }
}
2

Egy kisebb átalakítással

sandrosdj · 2013. Szep. 8. (V), 13.05
Egy kisebb átalakítással teljesen jól működik. Köszönöm a segítséget!
4

Félig off

Hidvégi Gábor · 2013. Szep. 11. (Sze), 08.08
Valószínűleg egyedül vagyok vele a világon, de a getElementsByClassName()-től mindig futkározik a hátamon a szőr. Mint mérnök rendkívül pongyolának találom a megfogalmazást, hisz a class attribútum végső soron az elem kinézetéért felelős, ebben az esetben viszont – alternatíva híján – egy bizonyos típus megjelelölésére használjuk. Olyan, mintha bemennék egy elektromos szaküzletbe, és mondanám az eladónak, hogy "adjon már egy olyan nagy, piros, kerek dugaljat!", ő pedig visszakérdezne, hogy "380 voltosra gondol?".

Szerintem a célra sokkal jobban megfelel a querySelectorAll(), bár megvan az a hátránya, hogy csak azután használható, hogy a dokumentum renderelése már befejeződött.
5

W3C QA Tip

complex857 · 2013. Szep. 11. (Sze), 08.58
Nem szükségszerű, hogy a class nevek (maga az attribútum értékének választott szavak) mindenképp az elem megjelenésére utaljanak, mind a html ajánlás, mind a W3C Quality Assurance (mert nekik ilyenjük is van, ide kéretik a kedvenc szarkasztikus megjegyzést beilleszteni w3c munkájának minőségéről :-P) által kiadott tippekben azt ajánlja a 3+2 betűs szervezet, hogy a class neveknek próbáljon az ember szemantikailag értelmezhető dolgokat adni:

http://www.w3.org/html/wg/drafts/html/master/dom.html#classes
There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

http://www.w3.org/QA/Tips/goodclassnames
Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.

Abban nem vagyok biztos, hogy a fejlesztők egymással/önmagukkal való kommunikációjának megsegítésén túl (és esetleg a kiemelt, "az ritkábban változik") van-e konkrét haszna, de nekem már ez is elég, illetve pl. a smacss -ben vázoltakkal szép összhangban van.

Google szintén említést tesz erről a témáról a web semantics doksijában, de csak nehezen megfogható érveket hoz fel mint a "It’s the professional thing to do." illetve megemlítik, hogy "It's more accessible" de nem látom, hogy ezt jobban kifejtenék.
6

Ennyi erővel kivehették volna

Hidvégi Gábor · 2013. Szep. 11. (Sze), 09.27
Ennyi erővel kivehették volna az id attribútumot, hogy használjunk helyette class-t, ennyivel is egyszerűbb lehetne a kód.
9

Bár kiváltható az id

bamegakapa · 2013. Szep. 11. (Sze), 10.14
Bár kiváltható az id class-szal, de megvan a logikája. Az id az elem egyedi azonosítója egy adott rendszeren (a weben dokumentumon) belül (pl. az én esetemben itt az oldalon bamegakapa), a class pedig, mint a neve is mutatja, az egyedek csoportosítására alkalmas (pl. az én esetemben ember, webfejlesztő, stb.).

A class-nak semmi köze nincs a megjelenítéshez, hiszen önmagában semmilyen információt nem hordoz a böngésző számára az elem megjelenéséről. Lehet persze rá CSS szabályokat írni, de sok más dologra is lehet.
7

var nodeList =

MadBence · 2013. Szep. 11. (Sze), 09.48
var nodeList = document.querySelectorAll('.story');
// vs.
var nodeList = document.getElementsByClassName('story');
Miért jobb szerinted ("szemantikailag", vagy akármilyen szempontból) az első megoldás?
8

Bocs

Hidvégi Gábor · 2013. Szep. 11. (Sze), 10.07
Rosszat írtam, a document.evaluate()-re gondoltam a querySelectorAll helyett.

var elemek = document.evaluate("div[@class = 'story']/div/a[@href = '/sajt']/../..");
for (var i in elemek) {
  elemek[i].style.display = 'none';
}
10

Teljesen Off

Pepita · 2013. Szep. 14. (Szo), 04.14
380 voltosra gondol?
Ha nekem ezt kérdezi viszza az eladó, akkor kérek egy másik eladót, vagy eljövök az üzletből... Tudtommal '87 óta 230/400 V-os a kisfesz. hálózat, az év nem 100%, de az érték igen. Nagyon-nagyon öreg ketyerén láthatsz ilyen dugaljat. És nem kérdezte az eladó, hogy 4, 5 vagy 7 pólusút kérek-e.

És mi a baj azzal, ha én a nagy piros dugaljak közt akarok keresgélni? (class attribútum.)
Mondjuk pont arra van szükségem, hogy megtaláljam köztük a 400V-os, 5 pólusút...

Szerk.: Ja, és a villanyászásból az áramot ki is hagytam: 16, 32, 63, 120, ... Amperesek.
3

Esetleg

MadBence · 2013. Szep. 8. (V), 16.42
Esetleg:
[].filter.call(document.getElementsByClassName('story'), function(story) {
  return [].some.call(story.getElementsByTagName('a'), function(link) {
    return link.getAttribute('href') == '/sajt';
  });
}).forEach(function(story) {
  story.style.display = 'none';
});
(csak érdekességként írtam, hogy így is lehet)

Tisztán CSS-ben ez sajnos (jelenleg) nem megoldható (nem tudod kiválasztani, hogy egy szabály teljesülése esetén az melyik elemre vonatkozzon). Majd a CSS4-ben talán.