将字符串包装在标记中

Wrapping string in tags

本文关键字：字符串 包装      更新时间：2023-09-26

我想取一个字符串并将其包装在这样的标签中：

<!-- 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/

你可以这样做：

$(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/

我不使用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/

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

$(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/

这样的东西会起作用：

$(".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/

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

}

相关文章：