Question

我试图将每个.string的{{1}}分成span个元素，但是找不到正确的方法。

我尝试了以下功能，但无法使其正常工作，因此只能在最近的.item上使用。

.item

$(".string").html(
  $(".string")
    .html()
    .split(" ")
    .map(function(el) {
      return "<span>" + el + "</span>";
    })
);

$(".item").each(function() {
  var arr = $(".string").text().split(" ");
  var html = "";
  for (i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(".this").closest(".string").html(html);
});

.string span {
  border: 1px solid
}

Answer 1

您首先需要.find内的.string内的.item被迭代

var arr = $(this).find(".string").text().split(" ");

否则，您的$(".string")仅与文档中的第一个.string相匹配。然后，要设置要继承的.string的子.item，请使用

$(this).find(".string").html(html);

（{closest搜索祖先，而不是孩子）

还请确保不要使用以下内容隐式创建全局变量

for (i = 0; i < arr.length; ++i) {

（总是声明要与const，let或var一起使用的变量）

$(".item").each(function() {
  var arr = $(this).find(".string").text().split(" ");
  var html = "";
  for (let i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).find(".string").html(html);
});

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

或者，如果可能的话，您可以直接遍历.string：

$(".string").each(function() {
  var arr = $(this).text().split(" ");
  var html = "";
  for (let i = 0; i < arr.length; i++) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).html(html);
});

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

另一种选择是使用正则表达式replace-查找非空格字符（(\S+)），并替换为由span包围的匹配的非空格字符：{ {1}}：

<span>$1</span>

$(".string").each(function() {
  $(this).html(
    $(this).html().replace(/(\S+)\s*/g, '<span>$1</span>')
  );
});

.string span {
  border: 1px solid
}

Answer 2

您的代码中几乎没有错误。将var arr = $(".string").text().split(" ");更改为var arr = $(this).find(">.string").text().split(" ");，以找到.string内部的.item，该循环处于当前循环中。

然后将$(".this").closest(".string").html(html);更改为$(this).find(">.string").html(html);，以替换.string内.item的html，这是当前循环的迭代。

$(".item").each(function() {
  var arr = $(this).find(">.string").text().split(" ");
  var html = "";
  for (i = 0; i < arr.length; ++i) {
    html += "<span>" + arr[i] + "</span>";
  }
  $(this).find(">.string").html(html);
});

.string span {
  border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

Answer 3

遍历所有.string元素，并为每个用空格分隔的文本创建一个跨度。然后用创建的跨度替换当前的div：

$.each($('.string'), (ind, val) => {
  const spans = $(val).text().split(' ').map(text => $(`<span>${text}</span>`));
  $(val).replaceWith(spans);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="string">Test1 Test2 Test3</div>
</div>
<div class="item">
  <div class="string">TestA TestB TestC</div>
</div>

jQuery将字符串转换为跨多个实例

3 个答案: