Jquery insert class inside html element

Question

I have a set of tabs, when a class is active I want to add the following:

<hr class="break-sec">

This class has to be inside the span class and after the title-text class as shown below. Here is the code and where it has to be inserted.

<li class="vc_tta-tab vc_active" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">
      GALLERY 
      <hr class="break-sec">
    </span>
  </a>
</li>

How can I accomplish this using jQuery?

Carsten Løvbo Andersen · Answer 1 · 2017-02-16T10:23:09.853

3

Is this what you are thinking about?

$('.vc_tta-title-text').append('<hr class="break-sec">') Will insert the hr right after the Span text

$('.vc_active .vc_tta-title-text').append('<hr class="break-sec">')

$('.vc_tta-tab').click(function() {
$('.vc_active .vc_tta-title-text').find("hr").remove();
  $('.vc_active').removeClass("vc_active");
  $(this).addClass("vc_active");
  $('.vc_active .vc_tta-title-text').append('<hr class="break-sec">')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="vc_tta-tab" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">GALLERY 
</span></a>
</li>

<li class="vc_tta-tab vc_active" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">PAGES 
</span></a>
</li>

<li class="vc_tta-tab" data-vc-tab="">
  <a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">VIDEOS 
</span></a>
</li>

edited Feb 16 '17 at 10:23

answered Feb 16 '17 at 09:59

Carsten Løvbo Andersen

26,637
10
47
77

unfortunately this inserts it to all tabs and not just the active one. – user1673498 Feb 16 '17 at 10:10
whilst the following line of Jquery does add thge line break to the current active tab, when another tab is clicked and comes active it does not apply the HR class...$('.vc_active span').append('
'); – user1673498 Feb 16 '17 at 10:20
Updated, Is this what you want? – Carsten Løvbo Andersen Feb 16 '17 at 10:23
This half works yes and i can tween it :) Thank you – user1673498 Feb 16 '17 at 10:28

Zakaria Acharki · Accepted Answer · 2017-02-16T10:29:01.673

You could use append to span/.vc_tta-title-text based on the active li vc_active like :

$('.vc_active .vc_tta-title-text').append('<hr class="break-sec">');
//OR
$('.vc_active span').append('<hr class="break-sec">');

Add click event to make it append the hr dynamically :

$('body').on('click', '.vc_tta-tab', function(){
    $('.vc_tta-title-text hr').remove(); //remove 'hr' from previous active tab
    $('.vc_active span').append('<hr class="break-sec">'); //Add 'hr' to the new active tab
})

Hope this helps.

$('.vc_active .vc_tta-title-text').append('<hr class="break-sec">');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
  <span class="vc_tta-title-text">
    NOT ACTIVE
  </span>
</a>
</li>

<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
  <span class="vc_tta-title-text">
    ACTIVE
  </span>
</a>
</li>

<li class="vc_tta-tab" data-vc-tab="">
<a href="#1485520583544" data-vc-tabs="" data-vc-container=".vc_tta">
  <span class="vc_tta-title-text">
    NOT ACTIVE
  </span>
</a>
</li>
<ul>

This half works, it adds the class to the current active tab however when another tab is clicked and it becomes active it does not apply the same rule... — user1673498, Feb 16 '17 at 10:20
Yes, since theres not handler on the change, which king of tabs lib are you using ? — Zakaria Acharki, Feb 16 '17 at 10:22

score 0 · Answer 3 · answered Feb 16 '17 at 10:01

0

Mixed content is always a little more complicated, but append should do it:

$('span.vc_tta-title-text').append($('<hr class="break-sec">'));

(Putting the new content in a jQuery object converts it to DOM elements.)

answered Feb 16 '17 at 10:01

Richard

106,783
21
203
265

Jquery insert class inside html element

3 Answers3