<$list> counter

#1

My goal here is to set a class name for each <span> tag, with the class name being link#. I am hoping there is a way to replace that # symbol with a number like I would with an array, for example: link0, link1, link2, etc…

<$list filter="[<currentTiddler>fields[]prefix[field-name]]" variable="thisfield">
  <span class='link#'><$transclude field=<<thisfield>>/></span>
</$list>

To paint a better picture of what I am trying to do,
The CSS would look something like this:

.link0 { display: inline-block; }
.link1, .link2 { display: none; }
.tiddler1 .link1,
.tiddler2 .link2 {
  display: inline-block;
}
.tiddler1 .link0,
.tiddler2 .link0 {
  display: none;
}

Template Tiddler would look like the first code above:

<$list filter="[<currentTiddler>fields[]prefix[field-name]]" variable="thisfield">
  <span class='link#'><$transclude field=<<thisfield>>/></span>
</$list>

Tiddler0 would look like this:

{{||Template}}

Tiddler1 would look like this:

<span class='tiddler1'>{{Tiddler0||Template}}</span>

Tiddler2 would look like this:

<span class='tiddler2'>{{Tiddler0||Template}}</span>

Essentially, the plan is to display different links based on the parent.

#2

HTML in TiddlyWiki are actually handled the same as TiddlyWiki widgets. That is, their parameters can use TiddlyWiki syntax, including “filtered transclusions”, like this:

<div class={{{ [[link]addsuffix<num>] }}}>...</div>

where [link] is literal text (i.e., “link”), and <num> is a reference to a TiddlyWiki variable that holds the desired numeric value.

enjoy,
-e

1 Like
#3

Eric beat me to the punch before I got my sample code worked out.

Although wordy, no sense wasting it:

<style>
.link1 {color:darkred;}
.link2 {color:orange;}
</style>

<$list filter="[[a]] [[b]]" counter="this_num">
<span class={{{ [[link]addsuffix<this_num>] }}}><<this_num>> {{!!title}} </span><br>
</$list>
#4

Thanks, everyone. That first solution worked after I added the counter="variable". I wouldn’t have figured that out with the second response.