create span-Tag und fügen Sie insbesondere div in jquery

Question

Ich verwende Kendo Grid Zeilenvorlage in meinem MVC-Projekt, wo ich eine div haben. Unten ist mein Beispielcode:

<script id="altRowTemplate" type="text/x-kendo-tmpl"> 
    <tr class="k-alt" data-uid="#: uid #"> 
    <td style="width:100%"> 
     <div class="row"> 
     <div class="col-sm-12" id="dvCategory"></div> 
     </div> 
    </td> 
    </tr> 
</script> 

I span in div mit jQuery bin anhängt.

for (var i = 0; i < data.data.length; i++) { 
    if (data.data[i].Category != null) { 
    var splitCategory = data.data[i].Category; 
    var setCategorySpan = "<span class='tags' style='font-family: arial; font-size: small'>" + splitCategory + "</span>"; 
    $("#dvCategory").html(setCategorySpan); 
    } 
} 

Aber span Tag mit dem Wert nicht in div zeigt. habe ich mit append auch versucht aber kein glück.

nun der aktuelle Code ist wie unten:

function changeTemplate(category) { 
 
      var splitCategory = category; 
 
      var setCategorySpan = ''; 
 
      if (splitCategory.indexOf(',') !== -1) { 
 
       splitCategory = category.split(','); 
 
       for (var i = 0; i < splitCategory.length; i++) { 
 
        var setcolID = 2; 
 
        // Trim the excess whitespace. 
 
        splitCategory[i] = splitCategory[i].replace(/^\s*/, "").replace(/\s*$/, ""); 
 
        // Add additional code here, such as: 
 
        setCategorySpan += "<div class='col-sm-" + setcolID + "'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory[i] + "</span></div>"; 
 
        setcolID+=2;     
 
       } 
 
       $("#dvCategory").append(setCategorySpan); 
 
      } 
 
      else { 
 

 
       setCategorySpan = "<div class='col-sm-12'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory + "</span></div>"; 
 
       $("#dvCategory").append(setCategorySpan); 
 
      } 
 
     }

<script id="altRowTemplate" type="text/x-kendo-tmpl"> 
 
     <tr class="k-alt" data-uid="#: uid #"> 
 
     <td style="width:100%"> 
 
      <div id="Category">  
 
       #:changeTemplate(Category)#            
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </script>

und in document.ready Funktion Ich habe div erstellt, wo ich HTML anhängen haben.

var container = document.createElement('div'); 
 
container.setAttribute('id', 'dvCategory'); 
 
container.setAttribute('class', 'row');

wenn ich bin using $('body').append(container); dann der ganze Wert aus Gitterkörper zeigt. Wenn ich den Code entferne, wird nichts angezeigt. Wie füge ich dynamisch erzeugtes HTML in dieser speziellen div Kategorie an?

Answer 1

var data={}; 
 
data.data=[{Category:1},{Category:2},{Category:3},{Category:4}]; 
 
console.log(data.data[1]); 
 
for (var i = 0; i < data.data.length; i++) { 
 
    if (data.data[i].Category != null) { 
 
    var splitCategory = data.data[i].Category; 
 
    var setCategorySpan = "<span class='tags' style='font-family: arial; font-size: small'>" + splitCategory + "</span>"; 
 
    $("#dvCategory").append(setCategorySpan); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!script id="altRowTemplate" type="text/x-kendo-tmpl"> 
 
    <tr class="k-alt" data-uid="#: uid #"> 
 
    <td style="width:100%"> 
 
     <div class="row"> 
 
     <div class="col-sm-12" id="dvCategory"></div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</script>

Answer 2

Try Seite der for-Schleife zu binden, aus. Ohne zu viele interne Schleifen anzuhängen, erstellen Sie Markup mit + = als String und hängen Sie schließlich HTML in div an.

var data={}; 
data.data=[{Category:1},{Category:2},{Category:3},{Category:4}]; 
var setCategorySpan = ""; 
for (var i = 0; i < data.data.length; i++) { 
    if (data.data[i].Category != null) { 
    var splitCategory = data.data[i].Category; 
    setCategorySpan += "<span class='tags' style='font-family: arial; font-size: small'>" + splitCategory + "</span>"; 

    } 
} 
$("#dvCategory").html(setCategorySpan); 

Answer 3

Dieses Beispiel zeigt einen Weg zu finden, wenn ein Element wird in dem Dokument hinzugefügt. Danach können Sie alles anhängen, was Sie wollen.

/* A small function that appends the html you want in the desired div and returns true*/ 
 
function addMoreToCategory() { 
 
    if ($('#dvCategory').length > 0) { 
 
     $("#dvCategory").append("<br><span class=\"extra\">and this is added when this element is visible</span>"); 
 
     /* fade in extra content and fire alert callback on finish */ 
 
     $(".extra").fadeIn(1200,function() { 
 
     alert("finished loading extra content"); 
 
     }); 
 
     return true; 
 
    } 
 
} 
 

 
alert("dvCategory not in Document"); 
 

 
$("#clickThis").on("click",function(){ 
 
    $(".row").html("<div id=\"dvCategory\">Lorem ipsum blah blah blah</div>"); 
 
    alert("dvCategory added in Document"); 
 
}); 
 
/* add an interval of 1 second to loop */ 
 
var v1 = setInterval(function() {if(addMoreToCategory()===true) { 
 
    /* once content is added once then stop */ 
 
    clearInterval(v1); 
 
}}, 1000);

.extra { display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 

 
</div> 
 
<button id="clickThis" type="button"> 
 
Click 
 
</button>

Fiddle

Answer 4

Sie können dies tun, indem Sie diesen einfachen Code zu schreiben:

$("#dvCategory").html(''); 
    for (var i = 0; i < data.data.length; i++) { 

    if (data.data[i].Category != null) { 

     var splitCategory = data.data[i].Category; 

     var setCategorySpan = "<span class='tags' style='font-family: arial; font-size: small'>" + splitCategory + "</span>"; 

     $("#dvCategory").append(setCategorySpan); 

    } 

    }