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

z4bn682m 于 2022-12-03 发布在 jQuery

关注(0)|答案(3)|浏览(281)

<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>并将其附加到类名为component-inner-container的每个div中。

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

    });

我被困在这里，找不到正确方法
编辑：添加的跨度应在后面，例如<span class="name table-item-name">PHS</span>

jquery

来源：https://stackoverflow.com/questions/74653041/create-and-append-a-span-inside-multiple-div-of-same-class

3条答案

按热度按时间

5lhxktic1#

你可以试着这样做：

$('.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)，因为我认为每个容器中只需要一个span。

演示版

第一次

赞(0）回复(0）举报 2022-12-03

jgovgodb2#

这个问题是因为在循环中你附加到了 every.component-inner-container，所以你在每个父循环中得到了N个副本，其中N是循环的长度。
要解决这个问题，只需在包含所有.component-inner-container元素的jQuery对象上直接调用append()。
还应注意，在设置className属性时应使用prop()，并且在这两种情况下最好都使用addClass()。
第一个

赞(0）回复(0）举报 2022-12-03

3j86kqsm3#

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

它会将span附加到所有具有类“component-inner-container”的元素。

赞(0）回复(0）举报 2022-12-03

我来回答

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

3条答案

相关问题

热门标签

最新问答