动态将值插入div的多行 [英] Dynamically insert value into multiple rows of divs

问题描述

给出这样的结构，该结构是在php中生成的:

Given a structure like this being generated in php:

<div class="row">
  <div class="col1 field">data_r1_c1</div>
  <div class="col2 field">data_r1_c2</div>
    .. more cols ..
</div>

<div class="row">
  <div class="col1 field">data_r2_c1</div>
  <div class="col2 field">data_r2_c2</div>
    .. more cols ..
</div>
..
more rows
..

每个div都有定位信息(未显示).

Each div also has positioning info (not shown).

如果将字段值直接放置到col div中(如图所示)，一切都很好.

If the field values are placed directly into the col divs (as shown) all is fine.

但是，需要为每个生成的数据值调用主javascript中的format(data)函数.我找不到一种方法来包括每个数据值的调用.在不同位置的脚本标签中尝试了各种形式的jquery，但似乎无济于事.

However, a format(data) function in the main javascript needs to be called for each generated data value. I can't find a way to include the call for each data value. Tried various forms of jquery in script tags in different places but nothing seems to work.

什么不起作用(将第一行的数据应用于所有行):

What doesn't work (applies the data for the first row to all rows):

$html = <div class="{$id} field {$type}" style="top: {$top}; left: {$left}; width: {$width} ; color: {$fg}; background-color: {$bg}"></div>
<script>$(".{$id}").text(pxformat("{$type}", "{$format}","{$data}","{$decPlaces}"))</script>

推荐答案

已编辑

使用 HTML5自定义数据属性 数据属性

在php中创建div时会包含未格式化的数据:

The unformatted data is included at the time of div creation in php:

$unformattedData = 'something';
$html = <<<EOF
<div data-unformatted="{$unformattedData}"></div>
EOF;

然后在浏览器中的javascript中查找具有未格式化数据的每个元素，对其进行格式化以进行品尝，然后将其应用回html中

Then in the browser javascript find every element with unformatted data, format to taste, and apply it back into the html

let elements = document.querySelectAll("[data-unformatted]");
elements.foreach(element =>{
  element.innerHTML = formatfunct(element.getAttribute("data-unformatted"));
}

所有这些都无需对div进行唯一标识或分类，从而消除了很多复杂性.

All without requiring any div to be uniquely id'd or class'd, removing much complexity.

经过测试，效果很棒！

这篇关于动态将值插入div的多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！