Question

以下是动态创建的（是的，它是旧的CMS，我担心）。

<div id="system">   

    <FORM ACTION="command.asp" METHOD="get" NAME="artForm">

    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
     <TR>
      <TD VALIGN="top">
        <H1>Sunbean</H1> bla bla bal
      </TD>
      <TD>
    &nbsp;&nbsp;&nbsp;&nbsp;
      </TD>
      <TD VALIGN="top" CLASS="td-main">
     <P ALIGN="center">
     <IMG SRC="http://www.mywebsite.com/images/articles/10013%5F1%2Ejpg" BORDER="0" ALT="Sunbeam Kald Katode, 30cm, Gr&#248;nn">
      </P>        
     <BR>
     <BR>

          Pris:                
         <FONT CLASS="font-pris-uextra">29,00</FONT> (Inkl. mva)<BR>
     <TABLE CELLSPACING="0" BORDER="0" CELLPADDING="2">
                 <TR>
                  <TD>
....
...

我想在Pris周围添加带有价格框的div标签，如下代码所示。

<div id="pricebox">
 Pris:
  <FONT CLASS="font-pris-uextra">29,00</FONT> (Inkl. mva)<BR>
</div>

我不确定如何在这种情况下添加div标签。 Pris和（Inkl.mva）将始终创建，但29,00将改变取决于产品。

Answer 1

你需要的主要jQuery函数是html（）：http://api.jquery.com/html/（或者可能是append（）：http://api.jquery.com/append/）。

将id为'myelement'的元素的内容设置为html字符串mystring：

jQuery('#myelement').html(mystring);

这可用于动态创建一些html，然后将其插入网页。剩下的问题是让选择器正确（在我的例子中，选择器是'#myelement'）。

从你的问题不清楚最佳选择器是什么。你可以从系统div向下工作：

jQuery('#system table tr td.td-main').html(...);

但这可能无法唯一识别有问题的td。您可以首先在src上匹配选择图像，然后导航树以获得您想要的位置。

还有一点需要注意的是，html（）也可用于返回元素的当前内容。您可能希望使用如下构造：

jQuery(myselector).html(jQuery(myselector).html() + myhtml);

编辑一些现有的html。

Answer 2

我在这里看到的问题是你的html格式不是很好（我明白 - 在之前使用过旧的CMS）......这使得jQuery DOM操作功能几乎一文不值。你需要开始搞乱字符串，jQuery太聪明了。

tttppp有权利我想，但我添加了一些字符串操作，希望能指向正确的方向。

$(document).ready(function() {
   $('.td-main').each(function(){
     var splitter1 = 'Pris:';
     var splitter2 = '(Inkl. mva)';
     htmlString = $(this).html().split(splitter1);
     htmlString = htmlString[0] + '<div class=\'priceBox\'>' + splitter1 + htmlString[1];
     htmlString = htmlString.split(splitter2)
     htmlString = htmlString[0] + splitter2 + '</div>' + htmlString[1];
     $(this).html(htmlString);
   });
});

嗯，粗糙的美味不是吗？我猜你可能在一个页面上有多个项目，因此.each（）语句。所有这些代码都是将html作为字符串获取，将其拆分，添加必需的文本并再次吐出。在代码运行之前我没有做任何检查，你可能需要考虑一下。

如何使用jQuery在td中添加div？

2 个答案: