如何使用 SPAN 或 DIV 将所有内容包装在 TD 元素中答案

【问题标题】：How do I wrap everything inside a TD element with a SPAN or DIV如何使用 SPAN 或 DIV 将所有内容包装在 TD 元素中
【发布时间】：2009-11-22 04:52:03
【问题描述】：

我做错了什么，我的html是这样渲染的：

<td colspan="2"><input id="ctl00_ContentPlaceHolder1_Login1_RememberMe"   
type="checkbox" name="ctl00$ContentPlaceHolder1$Login1$RememberMe" />  
<label for="ctl00_ContentPlaceHolder1_Login1_RememberMe">Remember me next time.  
</label></td>

我想把所有东西都包在里面带跨度的 TD。
这个想法是增加文本的字体大小 “下次记得我。”

到目前为止我有这个：

$(document).ready(function() {
        $("input:checkbox").css("border", "none");

        //$("input:checkbox").parent().addclass("checkboxtd");

        var parentTd = $("input:checkbox").parent();
        var prevToCheckBox = $("input:checkbox").prev();

        $(prevToCheckBox).css("border", "solid 1px red"); alert(prevToCheckBox);
        alert(prevToCheckBox.html());

        var parentofParent = parentTd.parent();

        $(parentTd).prepend("<span>");
        $(parentTd).append("</span>"); //+ "</span>"

        //parentTd.before("<div class=\"checkboxtd\"></div>");
        alert(parentTd.parent().html());

        //        $("input:checkbox").css("border", "none").prepend("<span>ss");
        //        $("input:checkbox").css("border", "none").prepend("<span>ss");
        //        $("h2").prepend("<span>ss");
        //        $('h2').append("</span>"); //+ "</span>"
    });

警报的输出(parentTd.parent().html());

<TD colSpan=2><INPUT id=ctl00_ContentPlaceHolder1_Login1_RememberMe 
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none" type=checkbox name=ctl00$ContentPlaceHolder1$Login1$RememberMe>  
<LABEL for=ctl00_ContentPlaceHolder1_Login1_RememberMe>Remember me next time.
</LABEL></SPAN></TD>

【问题讨论】：

不是你要问的，而是在你走这条路之前的重要阅读：davespicks.com/essays/notables.html,hotdesign.com/seybold
另外，你为什么要使用 JS？为什么不直接使用 CSS？
您的代码非常混乱。 prevToCheckBox 定位是什么？另外你为什么要定义parentofParent？如果你想要<tr>，最简单的方法是使用.closest('tr') (docs.jquery.com/Traversing/closest)
我会使用 css，但我引用的是 StackOverFlow css，并且想知道此页面下方的复选框 Notify 的样式。我在sstatic.net/so/all.css?v=5290 中找不到。

标签： jquery asp.net-membership jquery-selectors

【解决方案1】：

删除这两行：

$(parentTd).prepend("<span>");
$(parentTd).append("</span>"); //+ "</span>"

并使用这一行：

$(parentTd).wrapInner("<span></span>");

【讨论】：

【解决方案2】：

尝试直接操作 HTML：

var parentTdHTML = parentTd.html();
parentTd.html("<span>" + parentTdHTML + "</span>");

但是，正如 outis 对您的问题的评论所说，您正在做的事情是不必要的。您已经用<label> 正确地包围了您想要样式化的文本，这意味着您可以通过 CSS 轻松更改样式：

label {
    font-size: 110%;
}

【讨论】：