0

I want to add CSS class to <li></li> as shown in the following code. There are three <li></li> codes where I have added calss using {{attributes.addClass('')}}

from book-navigation.html.twig

{% if tree or has_links %}
  <nav role="navigation" aria-labelledby="book-label-{{ book_id }}">
    {{ tree }}
    {% if has_links %}
      <h2>{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
      <ul>
      {% if prev_url %}
        <li{{attributes.addClass('page-previous')}}>
          <a href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}"><b>{{ '‹'|t }}</b> {{ prev_title }}</a>
        </li>
      {% endif %}
      {% if parent_url %}
        <li{{attributes.addClass('page-up')}}>
          <a href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
        </li>
      {% endif %}
      {% if next_url %}
        <li{{attributes.addClass('page-next')}}>
          <a href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }} <b>{{ '›'|t }}</b></a>
        </li>
      {% endif %}
    </ul>
    {% endif %}
  </nav>
{% endif %}

The output I am getting is with above code is,

enter image description here

But, I want as following,

<ul>
  <li class="page-previuos"></li>
  <li class="page-up"></li>
  <li class="page-next"></li>
</ul>

Am I missing something, or there is other right-way to do that? Very Thanks.

0
2

If you don't want to add a class, but to replace the existing classes, you can use setAttribute().

<li{{attributes.setattribute('class', 'page-previous')}}>
1
  • If there is not a way to add the single class per code of line, this method looks the easiest way for this solution!!! – CodeNext Dec 23 '16 at 10:21
1

.addClass() will add the class to the previous class.

The .addClass() function: A function returning one or more space-separated class names to be added to the existing class name(s).

https://api.jquery.com/addclass/

2
  • What I want to do is, I just want to add separate class in each <li></li>, as shown in my last image. I think, there should be someway to do that. I can combine .addClass() and .addRemove() to achieve that, but I think that could be the not right way. – CodeNext Dec 23 '16 at 4:38
  • One more thing to point out this is not related to jquery. I have reffered this Using attributes in templates – CodeNext Dec 23 '16 at 4:40
1

We can use .removeClass() in the link classes to remove previous classes like this,

Code -

{% if tree or has_links %}
<nav role="navigation" aria-labelledby="book-label-{{ book_id }}">
{{ tree }}
{% if has_links %}
  <h2>{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
  <ul>
  {% if prev_url %}
    <li{{attributes.addClass('page-previous')}}>
      <a href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}"><b>{{ '‹'|t }}</b> {{ prev_title }}</a>
    </li>
  {% endif %}
  {% if parent_url %}
    <li{{attributes.addClass('page-up').removeClass('page-previous') }}>
      <a href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
    </li>
  {% endif %}
  {% if next_url %}
    <li{{attributes.addClass('page-next').removeClass('page-up') }}>
      <a href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }} <b>{{ '›'|t }}</b></a>
    </li>
  {% endif %}
  </ul>
{% endif %}
</nav>
{% endif %}
1
  • Yes that is right, even I have achieved that by combining both methods, hence image-3 in posted in question came, but I am looking for the method where we can simply add one class, if there is any. – CodeNext Dec 23 '16 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.