How to add increment (i) to css class on pug (aka jade)?

Question

On native javascript, it would be something like this:

HTML:

<div class="btns"></div> <div class="btns"></div>

Js:

 var buttons = document.querySelectorAll('.btns'); for(i=0; i<buttons.length; i++){ buttons.classList.add('btn_' +i); }

Pug:

 - var modalList = [{ title: "Многокамерная съемка", posterImage: "content/video.jpg", description: 'Мы используем камеры Panasonic, Sony, Blackmagic, Go Pro.Съемка на несколько камер с возможностью прямой трансляции, проекторы, плазменные панели. Онлайн трансляции в сети Интернет: 720р, 1080р, 4К.В нашем арсенале мультироторы для съемки верхних планов с 3-х осевой стабилизацией и возможностью передачи сигнала на пульт видеоинженеров (с дальнейшей трансляцией на экраны или в сеть).Кинематографические краны и тележки обеспечивают подвижность картинки и необходимую плавность кадра. Тросовая гиростабилизированная система подвеса с длиной кабельной линии до 100 метров позволяет снимать большие спортивные мероприятия и концерты непосредственно над зрителями.Благодаря оптическим удлинителям сигнала работа операторов проходит на значительном удалении от пультовой. Изображение передается в формате высокой четкости.' }, {title: "blabla"} ]; mixin modal-tackles(tackles) .modal.modal-contact.fade.tackles__modal_(здесь должен быть инкремент)(tabindex="-1", role="dialog", aria-labelledby="exampleModalLabel") .modal-dialog(role="document") .modal-content .modal-header span= tackles.title button.close(type="button",data-dismiss="modal", aria-label="Close") span(aria-hidden="true") x .modal-body for tackles in modalList +modal-tackles(tackles)

@Grundy, if you're talking about what's going on in my template engine, then I made changes to the question)

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-10-27T11:27:07

Instead of for in this case, it is better to use each , since it allows you to get the index of the current iteration.

Further this index needs to be transferred to mixin.

Since classes do not support interpolation, the class that needs to be collected dynamically needs to be transferred to attributes.

In the end, you should get something like this:

 for tackles, index in modalList +modal-tackles(tackles, index)

And in mixin:

 mixin modal-tackles(tackles, index) .modal.modal-contact.fade(class=`tackles__modal_${index}`, tabindex="-1", role="dialog", aria-labelledby="exampleModalLabel")

needles for the Christmas tree, I’ve done that only I wrote "class = tackles__modal_ +index" вместо: "class= tackles__modal_ $ {index}", AT SHOWER)
Well, generally speaking, your version also had to work, maybe you forgot to transfer the index itself to the mixin, but the syntax was incorrect, it should be something like this: (class="tackles__modal_"+index
@ GoodNew5, yeah, in the mixin call, you don’t pass the index, so inside it it is undefined

How to add increment (i) to css class on pug (aka jade)?

1 answer 1

More articles: