在相同 class 的多个 div 内创建和 append 跨度

Question

<div data-component-id="nwv4kv9j5ct9" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9">

   <span class="name table-item-name">JHP</span>
   <span class="service-tier table-item-tier"><a href="" target="_blank" 
      onclick="event.stopPropagation()">Tier 2</a></span>
 
   <span class="tooltip-base tool tooltipstered" style="display: none;">?</span>
 
   <span class="component-status table-item-status-childs" title=""><span class="app-status bg- 
      inactive">failing</span></span>
 
   <span class="tool icon-indicator fa fa-times tooltipstered"></span>
 
</div>
<div data-component-id="rtv4kv9j5cyu" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9">

   <span class="name table-item-name">PHS</span>
   <span class="service-tier table-item-tier"><a href="" target="_blank" 
       onclick="event.stopPropagation()">Tier 2</a></span>
 
   <span class="tooltip-base tool tooltipstered" style="display: none;">?</span>
 
   <span class="component-status table-item-status-childs" title=""><span class="app-status bg-inactive">degrading</span></span>
 
   <span class="tool icon-indicator fa fa-times tooltipstered"></span>
 
</div>
......
......

我需要在每个 div 中创建一个 append 跨度标签<span class="type table-item-type">Type</span> ，名称为 class component-inner-container 。 应该在之后

$('.component-inner-container').each(function () {
        var span = $('<span />').attr('className', 'type')
        span.appendTo(".component-inner-container");

    });

我被困在这里，找不到正确的方法

编辑：添加的跨度应该在例如<span class="name table-item-name">PHS</span>之后

Answer 1

您可以尝试这样做：

$('.component-inner-container').each(function() {
  var span = $('<span />').attr('class', 'type table-item-type').text("Type")
  span.appendTo(this);
});

我改变了你的span.appendTo(".component-inner-container"); 到span.appendTo(this) ，因为我认为你只希望每个容器中有一个跨度。

演示

 $('.component-inner-container').each(function() { var span = $('<span />').attr('class', 'type table-item-type').text("Type") span.appendTo(this); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-component-id="nwv4kv9j5ct9" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9"> <span class="name table-item-name">JHP</span> <span class="service-tier table-item-tier"><a href="" target="_blank" onclick="event.stopPropagation()">Tier 2</a></span> <span class="tooltip-base tool tooltipstered" style="display: none;">?</span> <span class="component-status table-item-status-childs" title=""><span class="app-status bg- inactive">failing</span></span> <span class="tool icon-indicator fa fa-times tooltipstered"></span> </div> <div data-component-id="rtv4kv9j5cyu" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9"> <span class="name table-item-name">PHS</span> <span class="service-tier table-item-tier"><a href="" target="_blank" onclick="event.stopPropagation()">Tier 2</a></span> <span class="tooltip-base tool tooltipstered" style="display: none;">?</span> <span class="component-status table-item-status-childs" title=""><span class="app-status bg-inactive">degrading</span></span> <span class="tool icon-indicator fa fa-times tooltipstered"></span> </div>

Answer 2

问题是因为在你的循环中你 append 到每个.component .component-inner-container 。 因此，您最终在每个父级中都有 N 个副本，其中 N 是循环的长度。

要解决这个问题，只需在 jQuery object 上直接调用append()保存所有 .component .component-inner-container元素。

另请注意，在设置className属性时应使用prop() ，并且在任何一种情况下都最好使用addClass() 。

 $('.component-inner-container').append($('<span />').addClass('type table-item-type').text('foo'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-component-id="nwv4kv9j5ct9" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9"> <span class="name table-item-name">JHP</span> <span class="service-tier table-item-tier"> <a href="" target="_blank" onclick="event.stopPropagation()">Tier 2</a> </span> <span class="tooltip-base tool tooltipstered" style="display: none;">?</span> <span class="component-status table-item-status-childs" title=""> <span class="app-status bg-inactive">failing</span> </span> <span class="tool icon-indicator fa fa-times tooltipstered"></span> </div> <div data-component-id="rtv4kv9j5cyu" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9"> <span class="name table-item-name">PHS</span> <span class="service-tier table-item-tier"> <a href="" target="_blank" onclick="event.stopPropagation()">Tier 2</a> </span> <span class="tooltip-base tool tooltipstered" style="display: none;">?</span> <span class="component-status table-item-status-childs" title=""> <span class="app-status bg-inactive">degrading</span> </span> <span class="tool icon-indicator fa fa-times tooltipstered"></span> </div>

Answer 3

$newSpan = $("<span />").addClass("type");
$('.component-inner-container').append($newSpan);

它将 append 跨度到具有 class “component-inner-container” 的所有元素。