Tag automatisch eine klasse zuweisen

Unregistriert

Ich möchte in einem bestimmten div allen a tags, welche ein img-Element umgeben class="lightbox" zuweisen. Hat da jemand eine Idee wie ich das machen könnte?

driver

HTML

<div class="lightbox">
 <a ...>
</div>


.lightbox a {...}

jojo87

du könntest nachdem Laden der Seite folgendes Javascript aufrufen:

Code

function applyClass(divID, linkKlasse) {
var links = document.getElementById(divID).getElementsByTagName("A");
for (var i in links)
{
links[i].className = linkKlasse;
}
}

Im HTML sieht das dann so aus:

HTML

<html>
<head>
<script type="text/javascript">
//hier die obige Funktion
</script>
</head>
<body>
<div id="links">
<a></a>
<a></a>
etc.
</div>
<script type="text/javascript">
applyClass("links","lightbox");
</script>
</body>
</html>

Alles anzeigen

Ungetestet!

Grüße,
jojo

kyr

Folgendes wird vom cms ausgegeben:

HTML

<div class="icms-album"><a href="/albums/..." rel="lightbox"><img src="/albums/.../thumbnail/..." /></a></div>

Und jetzt möchte ich, dass all diese Bilder im Content-Div beim a-Tag die klasse lightbox erhalten.
Also so:

HTML

<div class="icms-album"><a class="lightbox" href="/albums/..." rel="lightbox"><img src="/albums/.../thumbnail/..." /></a></div>

kyr

Dann müsste das so aussehen:

HTML

<html>
<head>
<script type="text/javascript">
    function applyClass(divCLASS, linkKlasse) {
    var links = document.getElementByClass(divCLASS).getElementsByTagName("A");
    for (var i in links)
    {
    links[i].className = linkKlasse;
    }
    }
</script>
</head>
<body>
     <div class="icms-album">
     <a></a>
     </div>
<script type="text/javascript">
     applyClass("icms-album","lightbox");
</script>
</body>
</html>

Alles anzeigen

kyr

Danke. Funktioniert bis jetzt aber noch nicht.

jojo87

tolle Fehlerbeschreibung^^

HTML

<html>
<head>
<script type="text/javascript">
    function applyClass(divCLASS, linkKlasse) {
    var divs = document.getElementsByClassName(divCLASS);
    for (var i in divs)
    {
      var links = divs[i].getElementsByTagName("A");
      for (var k in links)
      {
         links[i].className = linkKlasse;
      }
    }
    }
</script>
</head>
<body>
     <div class="icms-album">
     <a></a>
     </div>
<script type="text/javascript">
     applyClass("icms-album","lightbox");
</script>
</body>
</html>

Alles anzeigen

kyr

Code

<script type="text/javascript">
    function applyClass(divClASS, linkKlasse) {
    var divs = document.getElementsByClassName(divClASS);
    for (var i in divs)
    {
      var links = divs[i].getElementsByTagName('a');
      for (var k in links)
      {
         links[k].className = linkKlasse;
      }
    }
    }
</script>

Alles anzeigen

So jetzt klappts mit der lightbox. Vielen Dank!

The User

Wenn auch ohne JS irgendetwas funktionieren soll, würde ich eher das Template bearbeiten...

Unregistriert

Ohne JS würde die Lightbox nicht funktionieren und somit wäre die Funktion sowieso sinnlos.

Im Firefox klappt das ganze perfekt. Im IE hingegen funktioniert es nicht, d.h. die class wird vermutlich nicht zugewiesen. Kann sich jemand vorstellen,wie das Script für den IE noch angepasst werden muss?

Danke

kyr

Code

<script type="text/javascript">
    function applyClass(divClASS, linkKlasse) {
    var divs = document.getElementsByClassName(divClASS); alert('error');
    for (var i in divs)
    {
      var links = divs[i].getElementsByTagName('a');
      for (var k in links)
      {
         links[k].className = linkKlasse;
      }
    }
    }
</script>

Alles anzeigen

Die alert Meldung erscheint im IE nicht. Im FF schon.

crAzywuLf

nur so nebenbei,...
sowas kann man mit jQuery auch sehr schön umsetzen

jojo87

versuchs mal so:

Code

<script type="text/javascript">
    function applyKlasse(divKlasse, linkKlasse) {
    var divs = document.getElementsByClassName(divKlasse); alert('error');
    for (var i in divs)
    {
      var links = divs[i].getElementsByTagName('a');
      for (var k in links)
      {
         links[k].className = linkKlasse;
      }
    }
    }
</script>

Alles anzeigen

Dann natürlich auch den Funktionsaufruf anpassen.
Hatte kürzlich ein ähnliches Problem https://www.forum-hilfe.de/showthread.php?t=43720

kyr

Versuche es nun mit jQuery

Code

<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
      $(document).ready(function()
                { 
                $(".icms-album a").addClass("lightbox"); 
                }
    );
</script>

Dieser Code sollte eigentlich allen a-Tags in der div Klasse "icms-album" die Klasse "lightbox" hinzufügen.
Vermutlich steckt irgendwo noch ein kleiner Fehler bzw. wird die Funktion falsch aufgerufen.

jojo87

um "each" wirst du nicht drumrumkommen

kyr

Hmm. Meinst du sowas?

Code

<script type="text/javascript">
        $(document).ready(function() 
            { 
            var links = $(".icms-album a");
            for (var i in links)
                {
                     links[i].addClass("lightbox"); 
                }
        );
  </script>

Oder nochmal ein for-Block und dann Div und Tag einzeln?

kyr

Könnte es auch sein, dass sich mootools.js und jquery.js nicht vertragen und es somit nicht funktioniert? Denn ich benutze beide.

kyr

Versuche das Ganze irgendwie im noConflict() Modus hinzubringen, doch die alert-Meldung wird so nicht angezeigt. Sieht jemand einen fehler?

Code

<script src="/js/jquery/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
   jQuery.noConflict();
   jQuery(document).ready(function() 
                { 
                alert('error');
                var divs = jQuery(".icms-album").hide();
                for (var i in divs)
                    {
                        var links = divs[i]jQuery("a").hide();
                        for (var k in links)
                    }
                         links[k].addClass("lightbox"); 
                }
                );
           });
  </script>
  <script src="/js/mootools.js" type="text/javascript"></script> 
  <script src="/js/lightbox.js" type="text/javascript"></script>
  <script type="text/javascript">
  window.addEvent('domready', function($){
    new LightBox({find:'lightbox', OverlayStyles:{'background-color':'#000'},captionColor:'#000'});
    new LightBox({find:'LGWhite', color:'white', hexcolor:'#FFFFFF', captionColor:'#000'}); })(jQuery)

  </script>

Alles anzeigen

crAzywuLf

Zitat von kyr
Versuche es nun mit jQuery
Code
<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
      $(document).ready(function()
                { 
                $(".icms-album a").addClass("lightbox"); 
                }
    );
</script>
Dieser Code sollte eigentlich allen a-Tags in der div Klasse "icms-album" die Klasse "lightbox" hinzufügen.
Vermutlich steckt irgendwo noch ein kleiner Fehler bzw. wird die Funktion falsch aufgerufen.

Ansich funktionierts ganz gut...

HTML

<html>
<head>
<title>test</title>
<style type="text/css">
.lightbox img
{
    border: 15pt solid #000000;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function()
{
    $(".icms-album a").addClass("lightbox");
});
</script>
</head>
<body>


<div class="icms-album">
    <a href="/albums/..." rel="lightbox">
        <img src="/albums/.../thumbnail/..." />
    </a>
    <a href="/albums/..." rel="lightbox">
        <img src="/albums/.../thumbnail/..." />
    </a>
    <a href="/albums/..." rel="lightbox">
        <img src="/albums/.../thumbnail/..." />
    </a>
    <a href="/albums/..." rel="lightbox">
        <img src="/albums/.../thumbnail/..." />
    </a>
</div>


</body>
</html>

Alles anzeigen

Zitat

Könnte es auch sein, dass sich mootools.js und jquery.js nicht vertragen und es somit nicht funktioniert? Denn ich benutze beide.

Ich nehme mal an du hast irgendwelche Konflikte da

kyr

Nun funktionierts überall. Vielen Dank an alle!

Code

<script src="/js/jquery/jquery_gr.js" type="text/javascript"></script>
  <script type="text/javascript">
   jQuery.noConflict();
   jQuery(document).ready(function() 
                { 
                jQuery(".icms-album a").addClass("lightbox"); 
                }
               );
  </script>
  <script src="/js/mootools_gr.js" type="text/javascript"></script> 
  <script src="/js/lightbox_gr.js" type="text/javascript"></script>
  <script type="text/javascript">
  window.addEvent('domready', function($){
    new LightBox({find:'lightbox', OverlayStyles:{'background-color':'#000'},captionColor:'#000'});
    new LightBox({find:'LGWhite', color:'white', hexcolor:'#FFFFFF', captionColor:'#000'}); })(jQuery)
  </script>

Alles anzeigen