Erste Zeilenumbruch mit <span> und verbleibenden Textumbruch mit einem anderen <span> getrennt mit <br> Tag mit Jquery

Question

Ich möchte das erste Wort in einem Tag und den restlichen Text in einem anderen Tag mit
zwischen ihnen getrennt hinzufügen. Grundsätzlich möchte ich diese Art von HTML-Struktur.

<div class="hotspot-name"> 
    <span>Building</span> 
    <br/> 
    <span>One text text</span> 
</div> 

Was auch immer ich versucht habe, erwähnt in unten Schnipsel.

$(".hotspot-name span").each(function() { 
 
    var html = $(this).html().split(" "); 
 
    html = html.slice(0, -1).join(" ") + " <br />" + html.pop(); 
 
    $(this).html(html); 
 
});

.hotspot-name{margin-top:10px;}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div class="hotspot-name"> 
 
    <span>Building One</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Two test test</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Three test test</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Four</span> 
 
</div>

Dank !!

Answer 1

Um dies zu erreichen Sie den Text aufteilen die span innerhalb der .hotspot-name Elemente zu einem Array, und dann bauen Sie die beiden umspannt mit den resultierenden Werten. Versuchen Sie folgendes:

$('.hotspot-name span').text(function(i, t) { 
 
    var arr = t.split(' '); 
 
    var html = '<span>' + arr.shift() + '</span></br><span>' + arr.join(' ') + '</span>'; 
 
    $(this).closest('.hotspot-name').html(html); 
 
});

.hotspot-name{ margin-top: 10px; } 
 

 
/* only to show the effect working... */ 
 
.hotspot-name span:first-child { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div class="hotspot-name"> 
 
    <span>Building One</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Two test test</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Three test test</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Four</span> 
 
</div>

Answer 2

Array[0] in einem Bereich und dann Verbleibende Werte mit einem anderen Element übergeben siehe die Referenz Array slice upto N.

Ich war mit Farbe aktualisiert für die zwei Spannweite unterscheiden

$(".hotspot-name span").each(function() { 
 
    var html = $(this).html().split(" "); 
 
    html = '<span class="first_span">'+html[0] + " </span><br /><span class='second_span'>" + html.slice(1).join(" ")+'</span>'; 
 
    $(this).html(html); 
 
});

.hotspot-name{margin-top:10px;} 
 

 
.first_span{ 
 
    color:green; 
 
    } 
 
.second_span{ 
 
    color:red; 
 
    }

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<div class="hotspot-name"> 
 
    <span>Building One</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Two test test</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Three test test</span> 
 
</div> 
 
<div class="hotspot-name"> 
 
    <span>Building Four</span> 
 
</div>

Answer 3

AS i wird verstehen:

$(".hotspot-name span").each(function() { 
    var html = $(this).html().split(" "); 
    html = html.slice(1, html.length).join(" ") + " <br />" + html.pop(); 
    $(this).text($(this).html().split(" ")[0]+'</br>'); 
$(this).append(<span>'+html+'</span>'); 
});