Tags bestimmte class zuweisen

  • Themenstarter Themenstarter foobar
  • Beginndatum Beginndatum
F

foobar

hallo,

wie kann man in jquery über eine Schleife allen a tags in div.box eine bestimmte class zuweisen?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    var boxes = $(".box");
	
	for (i=0; i<boxes.length; i++){
		$(boxes[i] + " a").addClass("aId-"+i);
	}
	
});
</script>
</head>
<body>
<div class="box">
    <div class="row">
        <input type="text"  value=""/>
        <span>
            <a href="#" >Hinzufügen</a> <!-- <a href="#" class="aId-0">Hinzufügen</a> -->
            <a href="#" >Löschen</a>	<!-- <a href="#" class="aId-0">Löschen</a> -->
    </div>
</div>
<div class="box">
    <div class="row">
        <input type="text"  value=""/>
        <span>
            <a href="#" >Hinzufügen</a> <!-- <a href="#" class="aId-1">Hinzufügen</a> -->
            <a href="#" >Löschen</a>	<!-- <a href="#" class="aId-1">Löschen</a> -->
    </div>
</div>
</body>
</html>
 
Die Eigenschaft heisst "className". Beispiel:
Code: 
$(boxes[i] + " a").className = "meineKlasse";

Eine Node kann nur eine Klasse besitzen, also bitte nicht versuchen mehrere aneinanderzuhaengen.
 
Danke, ich bin jetzt etwas weitergekommen.

Warum wird mein Input Feld jetzt jedes mal wenn ich hinzufügen klicke immer doppelt hinzugefügt? Ich versuche die classnames neu zu vergeben aber es klappt irgendwie nicht richtig.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">


$(document).ready(function(){
	
	renameClass();
	
});

function renameClass(){
 	var boxes = $(".box");
	for (i=0; i<boxes.length; i++){
		$(boxes[i]).removeClass('div[class^=box-]').addClass("box-"+i);
		$(boxes[i]).find('a').removeClass('a[class^=aId]').addClass("aId-"+i);
	}
	console.log(boxes);
}
function addItem(target){
	id = getId(target);
	$('.box:first').after($('.box-'+id).clone()); 
	renameClass();
}


function getId(target){
	var $this = $(target);
	var x = $this.attr("className");
	var id = x.substring(4);
	return id;
}

</script>
</head>
<body>
<div class="box">
    <div class="row">
        <input type="text"  value=""/>
        <span>
            <a href="#" onClick="return addItem(this);" >Hinzufügen</a> 
    </div>
</div>
</body>
</html>
 
Hi,

du könntest die each-Methode verwenden:
Code: 
$(document).ready(function(){
  $(".box a").each(function(i){
    $(this).addClass("aId-"+i);
  });
});

Ciao
Quaese
 
Ja mit each würde es auch gehen aber ich habe ja jetzt das Problem das mein Input feld immer doppelt beim clone hinzugefügt wird (s. oben): Hier der link
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück