Jquery 在 html 元素内插入 class

Question

我有一组选项卡，当 class 处于活动状态时，我想添加以下内容：

<hr class="break-sec">

此 class 必须在 class 范围内且在 title-text class 之后，如下所示。这是代码以及必须插入的位置。

<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>

如何使用 jQuery 完成此操作？

Answer 1

这是你的想法吗？

$('.vc_tta-title-text').append('<hr class="break-sec">') 将在 Span 文本

之后插入 hr

$('.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>

Answer 2

您可以使用 append 到 span/.vc_tta-title-text 基于活跃的 li vc_active 像 :

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

添加点击事件使其动态附加 hr :

$('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
})

希望对您有所帮助。

$('.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>

Answer 3

混合内容总是有点复杂，但append应该这样做：

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

（将新内容放入 jQuery 对象会将其转换为 DOM 元素。）

Jquery 在 html 元素内插入 class

Jquery insert class inside html element

html

javascript

css

jquery

visual-composer