Question

我正在使用一组我无法控制的模板的网站上工作。我无法进入并编辑HTML，但我可以添加CSS。我试图通过在某些文本周围包装一个范围来更好地控制配置文件列表的外观。我已经看过使用jQuery做过类似的事情，但在这种情况下，我还没有能够得到任何工作。

这是当前的标记：

<h4>
  <a href="...">
    Person's Name
    <img width="120" height="122" alt="" src="...">
  </a>
</h4>

我遇到的问题是，无法使用css控制此标记内Person's Name文本周围的边距而不应用图像。

我想要做的是在a标记的第一部分之后添加<span>，然后在</span>标记之前用img关闭以将名称包裹在我可以的范围内用CSS定位。我猜测使用</span>添加.before并不会太难，但添加空缺<span>让我感到难过。

如果我使用jQuery，最好的方法是什么？

编辑：

对不起，我应该更清楚，这是一个包含在类中的div所以它目前看起来像这样：

<div class="profile">
  <h4>
    <a href="...">
      Person's Name
      <img width="120" height="122" alt="" src="...">
    </a>
  </h4>
</div>

目标是这样的：

<div class="profile">
  <h4>
    <a href="...">
      <span>Person's Name</span>
      <img width="120" height="122" alt="" src="...">
    </a>
  </h4>
</div>

Answer 1

获取内容，将其过滤为非空文本节点，并使用元素包裹，例如span：

＆＃13;

 $('h4 > a')
    .contents()
    .filter(function() {
        return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
    })
    .wrap('<span/>');

＆＃13;

h4 > a > span{
  background-color:red  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h4>
  <a href="...">
    Person's Name
    <img width="120" height="122" alt="" src="...">
  </a>
</h4>

＆＃13;

如何在元素中添加标记？

1 个答案: