jquery样式div并根据div标签添加标题

Posted 2023-05-08

【中文标题】jquery样式div并根据div标签添加标题

【英文标题】：Jquery style div and add title according to div tag

【发布时间】：2012-12-19 00:54:25

【问题描述】：

大家好，我有一个非常标准的带有 css 的 div，我想附加到给定类已经存在的 div。 这是我的标记

<div id ="one" class="PortalBox">

     </div>

   <div class="ab_Box1d">
                <div style="width:600px;">
                    <%@ include file="./concur-reports/index.html"%> 
                </div>
    </div> <!--finish ab_box1d-->  


</div>

这是我的 jquery。

 $(document).ready(function() 
$(".PortalBox").each(function()
    var ThisCss = $('<div class="ab_Box1a" id="report1" style="width:640px; padding-top:6px;">'+   
            '<div class="ab_Box1b" id="reportchild1"> </div>' +
                '<table class="ab_Box1c"  border="0"'+
                  'cellspacing="0" cellpadding="0">'+
              '<tr>'+
                  '<td style="text-align:left">Concur Reports</td>'+
              '</tr>'+
          '</table>'
   +
     '</div>' )
     ThisCss.insertAfter('.PortalBox');
   );
);

所以基本上当我偶然发现任何具有“PortalBox”类的 div 时，我试图在 jquery 中附加标记，但是我需要制作一个动态的部分，这基本上是一个标题 这部分

 '<td style="text-align:left">my channel</td>'+

需要动态地从另一个带有 div 的 HTML 属性中获取标题。 我可以将“title”属性添加到具有值的 div 标签中吗？如何使用 jquery 实现这一点？或 java-script 我对任何想法都持开放态度，因此可以替代解决方案。 提前致谢。

【参考方案1】：

将标题放在data-* 属性中：

<div data-title="my channel" class="PortalBox"></div>

然后您可以使用 jQuery 检索它：

$('.PortalBox').data('title');

---

完整代码如下：

$(document).ready(function() 
    var report = $('<div class="ab_Box1a" style="width:640px; padding-top:6px;">'+   
        '<div class="ab_Box1b" ></div>' +
        '<table class="ab_Box1c"  border="0"'+
        'cellspacing="0" cellpadding="0">'+
        '<tr>'+
        '<td style="text-align:left">Concur Reports</td>'+
        '</tr>'+
        '</table>'+
        '</div>');

    $(".PortalBox").each(function() 
        report.clone()
            .find('td').text( $(this).data('title') )
            .appendTo(this);
    );
);

请注意，像这样构造 HTML 片段非常容易出错。如果您发现自己经常这样做，您应该考虑使用模板系统。

【讨论】：

感谢 Joseph 的回复，您认为您的解决方案似乎出于某种原因覆盖了我的 css 吗？换句话说，看起来好像没有为该标题选择样式？有任何想法吗？我当然也会进一步研究模板

@Miguel - 我已经从标记中删除了 ID，因为您不能在不同的元素上重复使用相同的 ID。你必须编辑你的 CSS 来定位类名。

谢谢，但我没有按 id 应用样式。换句话说，它没有从 class="ab_Box1c" 中获取样式。这是我的最后一个问题，我保证对菜鸟问题感到抱歉。

@Miguel - 然后你要么有一些样式覆盖它，要么你的选择器不只是针对.ab_Box1c。无论哪种方式，这都超出了这个问题的范围，如果不查看整个代码库，就无法回答这个问题。

再次感谢 joseph，但最后一步基本上删除了 '

【参考方案2】：

$('div selector').attr('title', enterDesiredvalue);

【讨论】：

不知道你在追求什么，但实际上 title 属性是 HTML 中的一个工具提示。所以@Joseph 的方式实际上更好