Ich habe keine Kontrolle über den HTML-Code in diesem Projekt, daher muss alles mit JavaScript / Jquery erledigt werden.

Ich habe mehrere Seiten von einem Server. Einige dieser Tabellen haben Fußzeilen mit Fußnoten. Das erste Zeichen dieser Fußnoten ist entweder ein * oder ein †

Manchmal hat die Seite mehrere Tabellen.

Ich kann :: first-letter nicht verwenden, da es das Symbol UND den ersten Buchstaben auswählt. Die Polsterung muss sich nur rechts vom Symbol befinden

Ich muss rechts von diesen Zeichen einen Abstand hinzufügen, um sie vom Text zu trennen.

Ich konnte die Symbole erfolgreich erhalten. Wie Sie in meinem Code sehen können, wähle ich die Klasse aus, finde die Bereiche in der Klasse, erhalte den Text und konvertiere sie in Unterzeichenfolgen. Ich bekomme dann das erste Zeichen von jedem und wenn ich meine Ergebnisse auf console.log schreibe, sehe ich die Symbole. Ich versuche jetzt, sie mit einem Inline-Stil in eine Spanne zu packen, aber ich erhalte die Meldung "jquery-2.1.4.min.js: 3 Uncaught DOMException: 'insertBefore' konnte auf 'Node' nicht ausgeführt werden: Nur eine Element auf Dokument erlaubt. " Error.

Der HTML-Code wird in xsl-Dokumenten generiert. Hier ist jedoch die vom Inspektor übernommene Tabellenfußzeile:

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    $(chars).wrap("<span style='color: lime;'></span>");
   })
});
0
mediabloke 17 Jän. 2019 im 21:21

4 Antworten

Beste Antwort

Probier diese:

$(document).ready(function () {

    var span = $('.article-table-descriptions > span');

    span.each(function(index, el){
    
       var span_html =  $(el).html();

       $(el).html("<span style='color: lime;'>"+ span_html.charAt(0)  +"</span>" + span_html.substring(1,span_html.length));

    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn6">*footer text.</span>
    <span id="tblfn7">†footer text.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn8">*footer text.</span>
    <span id="tblfn9">†footer text.</span>
</div>
2
20yco 17 Jän. 2019 im 19:18

ohne jQuery können Sie so etwas tun

let tableFooterSpans = document.querySelectorAll('.article-table-descriptions > span');

tableFooterSpans.forEach(e => e.innerHTML = e.innerHTML.replace(/(†|\*)?/g,"<span style='color: lime;margin-right:5px'>$1</span>"));
<div class="article-table-descriptions">
  <span>†text1</span> <span>*text2</span>
</div>
0
d-h-e 17 Jän. 2019 im 19:04

Holen Sie sich zuerst alle entsprechenden span Elemente, bevor Sie versuchen, das erste Zeichen zu erhalten. Durchlaufen Sie dann die Bereiche, erhalten Sie das erste Zeichen und die Zeichenfolge minus das erste Zeichen, wickeln Sie das erste Zeichen ein und aktualisieren Sie dann span.

$( () => {

  const $spans = $( '.article-table-descriptions > span' );

  $spans.each( ( i, span ) => {
      
    const $span = $( span );
    const str   = $span.text();
    const char  = str.slice( 0, 1 );
    const _str  = str.slice( 1, str.length );

    $span.html( `<span class="highlight--char">${char}</span>${_str}` );
    
  } );
  
} );
.highlight--char {
  margin-right: 0.5rem;
  color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text 1a.</span>
    <span id="tblfn5">†footer text 1b.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text 2a.</span>
    <span id="tblfn5">†footer text 2b.</span>
</div>
0
hungerstar 17 Jän. 2019 im 19:07

Sie können so etwas versuchen, anstatt wrap() zu verwenden.

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

console.log("1",tableFooterSpans);

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    console.log("2", chars);
    $("#test").append("<span style='color : yellow'>"+chars+"</span>");
   })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>

<div id="test">test</div>
0
nazimboudeffa 17 Jän. 2019 im 19:05