在同一类的多个div中创建并追加一个span

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

我需要创建和附加一个span标签<span class="type table-item-type">Type</span>内每个div与类名component-inner-container。它应该在

之后

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

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

编辑:添加的span应该在例如<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

问题是，因为在你的循环你追加到每个.component-inner-container。因此，你最终在每个父节点上有N个副本，其中N是循环的长度。

要解决这个问题，只需在包含所有.component-inner-container元素的jQuery对象上直接调用append()。

还请注意，在设置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);

它将把span附加到所有类为"component-inner-container"的元素上。