包装带

Question

我想获得一个字符串，敷在标签这样的：

<!-- What I've got: -->  
<div class="calendar">Feb 22</div> 

<!-- What I want: 
<div class="calendar"> 
    <div class="calendarMonth">Feb</div> 
    <div class="calendarDay">22</div> 
    </div> 
-->​ 

我想煮一些jQuery的，但我有点卡住：

var calendarText = $(".calendar").html(); 
var calendarArray = calendarText.split(" "); 
var calendarMonth = calendarArray[0]; 
var calendarDay = calendarArray[1]; 

/* 

Then I tried something like this: 
calendarMonth.wrap("div").addClass("calendarMonth"); 

But I guess calendarMonth is just a string, not an object. 

*/ 

你会如何去做这样的事情？任何想法是高度赞赏。

的jsfiddle例如这里：http://jsfiddle.net/timkl/u23wY/

Answer 1

你可以做这样的：

$(function(){ 
    var calendarText = $(".calendar").html(); 
    var calendarArray = calendarText.split(" "); 
    var calendarMonth = calendarArray[0]; 
    var calendarDay = calendarArray[1]; 

    var html = "<div class=\"calendarMonth\">"+calendarMonth+"</div>"+ 
      "<div class=\"calendarDay\">"+calendarDay+"</div>"; 

    $(".calendar").html(html); 
}); 

更新您的提琴：http://jsfiddle.net/u23wY/1/

Answer 2

我不使用jQuery的，但如果我理解正确的是你'试图做...

var calendarText = $(".calendar").html(); 
var calendarArray = calendarText.split(" "); 
var calendarMonth = calendarArray[0]; 
var calendarDay = calendarArray[1]; 

var calendarDiv = document.getElementsByClassName("calendar")[0]; 
var calendarMonthDiv = document.createElement("div"); 
calendarMonthDiv.className = "calendarMonth"; 
calendarMonthDiv.appendChild(document.createTextNode(calendarMonth)); 
calendarDiv.appendChild(calendarMonthDiv); 

var calendarDayDiv = document.createElement("div"); 
calendarDayDiv.className = "calendarDay"; 
calendarDayDiv.appendChild(document.createTextNode(calendarDay)); 
calendarDiv.appendChild(calendarDayDiv); 

​ 

http://jsfiddle.net/vPtsK/

Answer 3

var calendarText = $(".calendar").html(); 
    var calendarArray = calendarText.split(" "); 

    $(".calendar").html(""); 
    $(calendarArray).each(
     function(index, item){ 
      $("<div>").html(item).appendTo(".calendar").addClass((index == 0)?"calendarMonth":"calendarDay") 
     }    
    ); 

Answer 4

$(function(){ 
    var a= $('.calendar').html().split(' '); 
    $('.calendar').html(''); 
    $('.calendar').append($('<div>',{html: a[0], class:'calendarMonth'})); 
    $('.calendar').append($('<div>',{html: a[1], class:'calendarDay'})); 
}) 

http://jsfiddle.net/6XjVD/

Answer 5

像这样将工作：

$(".calendar").html(function() { 
    var date = $(this).text().split(' '); 
    return '<div class="calendarMonth">' + date[0] + '</div>' + 
      '<div class="calendarDay">' + date[1] + '</div>';     
});​ 

http://jsfiddle.net/u23wY/2/

Answer 6

var string = '<div class="calendar">Feb 22</div>'; 
var elementFromString = getElementFromString(string); 

function getElementFromString(string) { 
var element; 

var elementInfo = new function() { 
    this.type = getInfoFromString("elementType"); 
    this.attributes = { 
     className: getInfoFromString("className"), 
     innerHTML: [ 
      "<" + this.type + " class = 'calendarMonth'>", 
       getInfoFromString("calendarMonth"), 
      "</" + this.type + ">", 
      "<" + this.type + " class = 'calendarDay'>", 
       getInfoFromString("calendarDay"), 
      "</" + this.type + ">", 
     ].join(""), 
    }; 
}; 

createElement(elementInfo); 

return element; 

function getInfoFromString(infoName) { 
    var info; 
    var setInfoTo = { 
     elementType: setInfoToElementType, 
     className: setInfoToClassName, 
     calendarMonth: setInfoToCalendarMonth, 
     calendarDay: setInfoToCalendarDay, 
    }; 

    setInfoTo[infoName](); 

    return info; 

    function setInfoToElementType() { 
     info = /<(\w+)/.exec(string)[1]; 
    } 

    function setInfoToClassName() { 
     info = /="(\w+)"/.exec(string)[1]; 
    } 

    function setInfoToCalendarMonth() { 
     info = /<.*>(\w+)/.exec(string)[1]; 
    } 

    function setInfoToCalendarDay() { 
     info = /<.*>\w+ (\d+)/.exec(string)[1]; 
    } 
} 

function createElement() { 
    element = document.createElement(elementInfo.type); 
    var attributeName; 
    var attributeValue; 

    for (attributeName in elementInfo.attributes) { 
     attributeValue = elementInfo.attributes[attributeName]; 

     element[attributeName] = attributeValue; 
    } 
} 

}