0

现在我正在努力在旧模板中插入一个新元素，但我遇到了一些问题。基本上，在其他地方有一堆已经定义的 css 规则，这让我很难按照我的意愿准确定位我的 div。

是否可以以某种方式引用代表文本实际呈现位置的 div？如果解决方案是在 javascript 或 css 中，我实际上并不在意，但从逻辑上讲，css 似乎是此功能的正确位置。

例子：

<div>
    <div style="text-align:right">Content</div>
</div>

在该示例中，将有一个跨越页面宽度的大 div，但我真的只想要直接处理文本实际存在的相对较小区域的东西。这可能吗？

具体来说，我要做的是确保我添加到现有模板（想想导航选项卡）的新型元素将是非常模块化的。我希望能够为这些选项卡使用非常不同的描述长度，并且能够在不事先了解其 DOM 父级的情况下将背景应用于它们（我可以在其中放置任何新内容，但当前的布局意味着这必须工作在某个随机 div 和某个随机跨度内）

4

2 回答 2

1

我对此感到非常愚蠢，但我会继续发布这个答案，以防其他人在未来搜索这个。jQuery 实际上对此有一个简单的解决方案。

例子：

<div>
    <div id="id" style="text-align-right">Some Text</div>
</div>

$(document).ready(function(){
    $("#id").wrapInner("<span id=renderedTextWrapper" />);
    $("#renderedTextWrapper").//do whatever you want with it
}

一旦你有了那个元素，就很容易做任何你喜欢的事情。为了解决必须将其插入随机 DOM 位置的问题，我只是将我的文本包装在一个 div 中，并确保它在传递给模板时没有被转义。

于 2013-07-25T16:10:15.360 回答
0

您不能针对 html 元素内的文本定位某些内容，只能针对元素本身定位。

但是，您可以（如果您想走这么远）计算元素的大小，找到它的位置和文本对齐方式，然后进行数学计算以找出新插入的元素的放置位置。理论上，您可以计算元素中的字符，获取它们的字体大小并以像素为单位计算它们的长度。我无法演示计算，因为您没有提供业务规则

<div>
    <div style="text-align:right">Content</div>
</div>

<script>
function insertNewElement(element, newElement){ //element is a jquery object referencing the element you're inserting against and newElement is the one you're inserting

    var offset = element.offset()
    var alignmnet = element.css("text-align")
    var parent = element.parent(); 
    //now do the calculations you need to and adjust the newElement's css
    parent.append(newElement); 

}

</script>
于 2013-07-25T15:03:30.607 回答