How to add a special class only to first child of auto generated list?

vineonardo · 2012-05-16 20:48:45

Hello,
I’m working on a project which requires me add special class to only the first item in an unordered list generated by <txp:upm_article_image /> tag.
I need to generate code like below:

<ul class="something">
<li class="active child">image 1</li>
<li class="child">image 1</li>
<li class="child">image 1</li>
</ul>

I’m not sure if this’s really a textpattern problem, can it be solved by javascript or anything else?

thanks for your time.

MattD · 2012-05-16 21:50:39

Not sure how upm_article_image works but you might be able to do it using a variable or one of the count plugins such as mdn_count.

jquery way could be

$(".something:first-child").addClass("active");

or

$(".child:first").addClass("active");

Last edited by MattD (2012-05-16 21:54:44)

joebaich · 2012-05-17 04:53:44

Instead of adding a class could you achieve your desired result with CSS by using a psuedo class

ul.something>:first-child
OR
li:first-child

vineonardo · 2012-05-17 06:51:36

Hello and thanks to both of you.

It was a great help for a noob like me :)

It worked the way MattD told, thanks again.

Last edited by vineonardo (2012-05-17 06:56:14)

a7atylor · 2012-05-21 10:25:15

You could do this using jquery:

http://api.jquery.com/first/

I often use .last() for removing the border and other styles in lists.

Textpattern CMS

Textpattern CMS support forum

#1 2012-05-16 20:48:45

How to add a special class only to first child of auto generated list?

#2 2012-05-16 21:50:39

Re: How to add a special class only to first child of auto generated list?

#3 2012-05-17 04:53:44

Re: How to add a special class only to first child of auto generated list?

#4 2012-05-17 06:51:36

Re: How to add a special class only to first child of auto generated list?

#5 2012-05-21 10:25:15

Re: How to add a special class only to first child of auto generated list?

Board footer