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

}

在标签中包装字符串

6 个答案: