Question

我在svg文本中有多个span tspan元素。我需要计算每个tspan的{{1}}。根据计数我必须限制高度限制。如何使用jquery实现它。

span

var count_tspan = jQuery('span text').children().length); // 4
console.log(count_tspan);

Answer 1

您需要使用find函数和length属性。这是解决方案：

var spans=$('span');
$.each(spans,function(){
   console.log($(this).find('tspan').length);
});

＆＃13;

var spans=$('span');
$.each(spans,function(){
   console.log($(this).find('tspan').length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-inner">        
   <span id="item-0" class="drag-item ui-draggable ui-resizable drag-item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);" aria-disabled="true">         
 <svg width="84" height="79" viewBox="-0.3791112600718641 0 65.8780487804878 88.875" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.8609587374124218">
 <text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
   <tspan dy="0" x="50%">Hello</tspan>
<tspan dy="27" x="50%">Hello</tspan>
  <tspan dy="27" x="50%">Hello</tspan></text></g>
</svg>
 </span>
 <span id="item-1" class="drag-item ui-draggable ui-resizable drag-  item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);" aria-  disabled="true">
   <text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
   <tspan dy="27" x="50%">Hello</tspan></text>
 </span>

＆＃13;

这是javascript版本。你必须遍历nodeList。

var spans=document.getElementsByTagName('span');
for(i=0;i<spans.length;i++){
    console.log($(spans[i]).find('tspan').length);
}

Answer 2

您必须遍历每个span并在每个span内搜索tspan

示例

＆＃13;

$.each($('span'), function() {
  console.log($(this).find('tspan').length)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="content-inner">
  <span id="item-0" class="drag-item ui-draggable ui-resizable drag-item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);"
  aria-disabled="true">         
     <svg width="84" height="79" viewBox="-0.3791112600718641 0 65.8780487804878 88.875" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.8609587374124218">
     <text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
       <tspan dy="0" x="50%">Hello</tspan>
    <tspan dy="27" x="50%">Hello</tspan>
      <tspan dy="27" x="50%">Hello</tspan></text></g>
    </svg>
     </span>
  <span id="item-1" class="drag-item ui-draggable ui-resizable drag-  item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);"
  aria- disabled="true">
       <text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
       <tspan dy="27" x="50%">Hello</tspan>
       </text>
     </span>
</div>

＆＃13;

如何计算每个span元素内的tspan？

2 个答案:

示例