jQuery在html元素内插入类

Question

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

<hr class="break-sec">

此类必须在span类内部，并且在title-text类之后，如下所示。 这是代码，必须将其插入。

<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

您可以根据活动li vc_active使用append来span/.vc_tta-title-text ，例如：

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

添加click事件以使其动态附加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元素。）