时间戳

首页 > 解决方案 > 如何使用 jQuery/JavaScript 在标题右侧生成一个元素？

javascript - 如何使用 jQuery/JavaScript 在标题右侧生成一个元素？

问题描述

我的一个项目需要帮助。此处以简短的代码示例显示它的含义。

想象一下，我们有两个区域。这些都标有“框”类。在这两个框中都是元素，每个元素都有一个标题和特定的内容。让我们将示例限制在相关标题上。

现在我想在右框中添加元素，这些元素直接位于标题文本的后面。但是，应该注意的是，这个元素不应该是伪元素，因为一方面我已经在我的项目中使用了它，并且调用了某些不适合伪元素的函数。

如何将一个元素直接放在另一个元素的文本后面？

generateNewItems();

function generateNewItems() {
  let elements = $(".box#test div");
  
  for (let elem of elements) {
    let heading = $(elem).children("h3");
    
    let leftPos = 10; /* HOW? */
    
    let el = $("<div>").addClass("new-item").css({
        "left": leftPos,
      "top": -3
    });
    
    $(elem).append(el);
  }
}
.new-item {
  position:absolute;
  background:red;
  height:30px;
  width:30px;
}

.box {
  width:50%;
  background:lightblue;
  float:left;
}

.box > div {
  position:relative;
}

.box > div > h3 {
  background:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div>
    <h3>test-one</h3>
  </div>
  <div>
      <h3>test-two</h3>
  </div>
</div>
<div class="box" id="test">
  <div>
    <h3>small-text</h3>
  </div>
  <div>
      <h3>long-sample-text</h3>
  </div>
</div>

标签： javascripthtmljquerycssbootstrap-4

解决方案

有一种方法：

您必须将 . 添加<span>到<h3>. 给它100% height和 30px width，然后做它position: relative。

在那个跨度内，放另一个跨度，position:absolute并给它你想要的大小和颜色。

注意：这适用于文本是左，中还是右，但只有当里面的文本<h1>不是全宽时<div>

generateNewItems();

function generateNewItems() {
  let elements = $(".box#test div");
  
  for (let elem of elements) {
    let heading = $(elem).children("h3");
    
    let el1 = $("<span>").addClass("new-item-fake");
    let el2 = $("<span>").addClass("new-item");
    $(el1).append(el2);
    $(heading).append(el1);

    
  }
}
.new-item-fake {
display: inline-block;
position: relative;
  height:100%;
  width:30px;

}
.new-item {
  position: absolute;
  display: block;
top: -21px;
left: 0px;
  height:30px;
  width:30px;


background: red;
}

.box {
  width:50%;
  background:lightblue;
  float:left;
}

.box > div {
  position:relative;
}

.box > div > h3 {
text-align: right;
  background:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <div>
    <h3>test-one</h3>
  </div>
  <div>
      <h3>test-two</h3>
  </div>
</div>
<div class="box" id="test">
  <div>
    <h3>small-text</h3>
  </div>
  <div>
      <h3>long-sample-text</h3>
  </div>
</div>

推荐阅读