last day (28 days later) » 

11:33 AM
0
Q: How can I generate unique class name for div inside a for loop in velocity template?

user2900150I have a for loop inside my velocity template to display element on web page. I am wrapping them inside div but I end up having same div name for all the elements. How can I make sure that all the div is having unique class name for all the elements. #foreach($i in [0..$size]) <div c...

 
why have unique class names? that's sort of clashing with the purpose of having classes. you should rather have unique IDs for each div.
 
@NicoO I have to apply some property using javascript on those elements so I need to have separate class names for them.
@SudhansuChoudhary: For your convenience if I have id , how do I generate unique Id for those elements.
 
#foreach($i in [0..$size]) <div class= styles id="div-$i"> could do! then you can have the desired behaviour of divs using these unique IDs through javascript/css
And one more thing, in your problem, <div class= styles> should be <div class= "styles"> So my solution for IDs would be, #foreach($i in [0..$size]) <div class= "styles" id="div-$i">
 
@SudhansuChoudhary: I just updated my question so that it will give you a fair idea of why I am using the same. Also $i goes out of scope as soon as I try to access it inside the script tag.
 
saw it, you do not need to access $i with the solution that I've provided, you would get IDs like, div-0, div-1, div-2 or class names as styles-0, styles-1etc. All you got to do is filter out these div IDs or class names using a suitable selector and carry on with the logic. Also, your $(document).ready(function() { would execute when the DOM is ready, i.e., your DOM would not contain $i it would have been moulded into the different IDs or class names as I've mentioned.
 
11:33 AM
@SudhansuChoudhary: How can I filter those class name as those are all dynamic.
I added $( "div" ).filter( document.getElementById( "styles-" ) ); inside my script tag but it does not seem to work.
<script>


$(document).ready(function() {

$( "div" ).filter( document.getElementById( "styles-" ) );

$('div.new-div, div.styles-').connections();

var connections = $('connection, inner');
setInterval(function() { connections.connections('update') }, 100);
});
</script>
 
you can use $("[class^=div-]")
this will give all the elements whose class names start with "div-"
what's "$('div.new-div, div.styles-').connections();" in your script?
 
$('div.new-div, $("[class^=div-]")').connections();
That is javascript framework I am calling
to create connections between elements
 
ok..
whats 'div.new-div'?
 
it is the another div from which I am making a connection
 
do you need that??
just a `$("[class^=div-]").connections();` wouldn't work?
hmm..
 
11:40 AM
$('div.new-div, $("[class^=styles-]")').connections();
is not working
 
I doubt if that syntax of yours is fine
have you tried alerting or logging on console the value of $('div.new-div')??
and check what element it has
try console logging
 
This is what I am using
If I use $('div.new-div, div.styles).connections(); it works fine but create connection with just one element as it treats them a single div
 
thats because, you probably have a div with class="new-div" and another div with class="styles" and there is a connection established between those two and it works fine
I dont know how this musclesoft sort of iterates through the elements
I feel thats what you want right?
I mean multiple connections?
 
yes
under style I am generating multiple elements
so want multiple connections
 
11:55 AM
ok you got to use .each() in that case
wait let me give you an example
 
sure
thanks
 
$( "[class^=div-]" ).each( function( index, element ){
// console.log( $( this ).text() );
$('div.new-div, $(this)').connections();
});
something like this
 
sure let me try this
 
12:10 PM
yeah this should work
hopefully
 
[div.styles-0, context: div.styles-0]
jquery-latest.min.js?locale=en-IN:2 Uncaught Error: Syntax error, unrecognized expression: div.new-div, $( this )
In console it shows me the right div but throws error
 
$( "[class^=div-]" ).each( function( index, element ){
// console.log( $( this ).text() );
$('div.new-div, $("[class^=div-]")[index]').connections();
});
try that
else,
$( "[class^=div-]" ).each( function( index, element ){
// console.log( $( this ).text() );
$('div.new-div, element').connections();
});
try this
let me know,/
else a different way would be,

$( "[class^=div-]" ).each( function( index, element){
var elm = $(element);
$('div.new-div, elm').connections();
});
 
console.log( $( elm )); shows [div.styles-1, selector: "", context: div.styles-1]
I just need div.styles-1
 
12:26 PM
console.log() would log the entire object with it's properties
it doesn't work?
 
what about this,

$( "[class^=div-]" ).each( function( index, element ){
// console.log( $( this ).text() );
$('div.new-div, element').connections();
});
or this,


$( "[class^=div-]" ).each( function( index, element ){
// console.log( $( this ).text() );
$('div.new-div, $("[class^=div-]")[index]').connections();
});
 
let me try
Uncaught Error: Syntax error, unrecognized expression everytime
 
strange? in jquery.min.js?
*strange!
 
yes ideally your suggestion should have worked
 
12:35 PM
$(this) or element should work
any other syntax error anywhere?
when you tried,

$( "[class^=div-]" ).each( function( index, element){
var elm = $(element);
$('div.new-div, elm').connections();
});

did you get a syntax error as you said you tried logging,

console.log( $( elm )); shows [div.styles-1, selector: "", context: div.styles-1]

you should have logged, console.log(elm) which makes me wonder, if you wrote something like,

$( "[class^=div-]" ).each( function( index, element){
var elm = $(element);
$('div.new-div, $(elm)').connections();
});

it should only be `elm` and not `$(elm)`
 
1:06 PM
No only that error
 
1:22 PM
Thanks Sudhansu
It's working now
 

  last day (28 days later) »