how to count tspan inside every span element?

Question

I have multiple span inside svg text tspan elements are there. I need to count the tspan of each span . According to count i have to restrict the height limit. how to achieve it using jquery.

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

<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></g>
     </span>

Answer 1

You need to use find function and length property. Here is solution:

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

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

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

Here is javascript version. You have to iterate through nodeList .

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

Answer 2

You will have to loop over each span and search inside each span for tspan

Sample

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

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