Javascript 如何通过JQUERY选择第二个文本节点

嗨，我想选择不在元素下的文本节点。但是我想一个接一个地选择它们

例如，我只想选择第二个文本节点，即“Baths:”

有可能吗

我这样做是为了在这些文本节点之前添加一些图标

以下是代码：

<div class="property-info">
Beds: <strong>3</strong> 
<br> 
Baths: <strong>2</strong> 
<br> 
Sq. Ft.: <strong> 1,055 </strong> 
<br> 
Type: <strong>Condo</strong> 
<br>
</div>

床位：3张


浴室：2个


面积：1055平方英尺


类型：公寓

提前谢谢

这是一把小提琴：

*HTML添加了跨距，因此您可以抓取文本。注意！！我添加了跨距，您也需要添加跨距

 <div class="property-info">
 <span>Beds:</span><strong>3</strong> 
 <br> 
 <span>Baths:</span> <strong>2</strong> 
 <br> 
 <span>Sq. Ft.:</span> <strong> 1,055 </strong> 
 <br> 
 <span>Type:</span> <strong>Condo</strong> 
 <br>
 </div>

---

您可以用正则表达式替换HTML：

var html=$（'.property info'）.html（）；
$（'.property info'）.html（html.replace（/（\s*）（[^:\W]*）（.*）（.*））/g，'i$2$3$4）
。图标{
颜色：白色；
边界半径：15px；
最小宽度：15px；
显示：内联块；
文本对齐：居中；
边缘底部：5px；
}
.床图标{
背景颜色：绿色；
}
.浴室图标{
背景色：红色；
}
.Sq图标{
背景颜色：蓝色；
}
.类型图标{
背景颜色：橙色；
}

床位：3张


浴室：2个


面积：1055平方英尺


类型：公寓



为您提供节点0的文本

如果你想在这之前或之后添加一些东西

$('.property-info')[0].childNodes[0].data = text + 'something';

您可以尝试使用下面的代码只提取文本，并在文本之前添加任何您想添加的内容


HTML代码-

<div class="property-info">
  Beds: <strong>3</strong>
  <br> Baths: <strong>2</strong>
  <br> Sq. Ft.: <strong> 1,055 </strong>
  <br> Type: <strong>Condo</strong>
  <br>
</div>


床位：3张

浴室：2个

面积：1055平方英尺

类型：公寓



JAVASCRIPT代码-

var data = $(".property-info").contents();
console.log(data);
count = 0;
for (i = 0; i < data.length; i++) {
  if (data[i].nodeName == "#text" && data[i].nodeValue.trim().length > 0) {
    data[i].nodeValue = "icon code goes here" + data[i].nodeValue;
    console.log(data[i].nodeValue);
  }
}

var data=$（“.property info”）.contents（）；
控制台日志（数据）；
计数=0；
对于（i=0；i0）{
数据[i].nodeValue=“图标代码在这里”+data[i].nodeValue；
log（数据[i].nodeValue）；
}
}
一种方法，它迭代
内容（）
，检查文本节点的下一个同级节点是否为
，并使用对象存储基于文本的图标html


var图标={
“床：”：“[床图标]”，
“浴缸：”：“[浴缸图标]”
}
$（'.property info'）.contents（）.each（function（））{
var$node=$（这个）；
if（this.nodeType===3&&$node.next（）.is（'strong'））{
var icon=图标[$node.text（）.trim（）]| |“”；
$node.before（图标）；
}
})

床位：3张

浴室：2个

面积：1055平方英尺

类型：公寓


我尝试了你所有的答案，仍然做了一些研究

以下是我得出的结论：

这段代码用一个“span”来“包装”所有节点，我在上面添加了一个类“text\u nodes”。

jQuery(function() {
   jQuery('.property-info')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  }).wrap('<span class="text_nodes"/>');
});

 <div class="property-info">
 <span class="text_nodes">Beds:</span><strong>3</strong> 
 <br> 
 <span class="text_nodes">Baths:</span> <strong>2</strong> 
 <br> 
 <span class="text_nodes">Sq. Ft.:</span> <strong> 1,055 </strong> 
 <br> 
 <span class="text_nodes">Type:</span> <strong>Condo</strong> 
 <br>
 </div>

这是它现在的样子


非常感谢那些帮助和回答问题的人。你们都给了我一个解决这个问题的办法
 做什么。。。你还控制html结构吗？你说的“选择”是什么意思？你想要Bath值吗？可能要检查@charlietfl:不，我没有对html结构的控制，它是由插件动态创建的。马西亚斯：我需要选择文本节点。每一个，都不是魔法。它是由我添加的，所以你可以选择文本，不能在不添加或删除内容的情况下修复代码：P loll答案中没有提到这一点，并且与上次我尝试帮助解决堆栈溢出问题时使用的标记不同！！您好，谢谢您的回答，但是我粘贴的代码是由插件动态创建的。这就是我需要选择文本节点的原因。放松点@NicholasO'Malley，生命如此短暂…@charlietfl只是想帮助你改进答案。嗨，谢谢你的答案，但我不想提取它们。我只想选择它们，以便能够在这些文本节点之前添加一些图标。@MarkLozano现在尝试运行我的示例。我觉得它很接近你要找的东西。嗨@Shubham，我觉得这很有趣，它确实在它前面插入了图标。但情况是，我会为每个图标使用不同的图标。这就是为什么我需要选择它们中的每一个。@MarkLozano您可以通过将条件置于文本值之上，在每个文本中插入不同的图标。
jQuery(function() {
   jQuery('.property-info')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  }).wrap('<span class="text_nodes"/>');
});

 <div class="property-info">
 <span class="text_nodes">Beds:</span><strong>3</strong> 
 <br> 
 <span class="text_nodes">Baths:</span> <strong>2</strong> 
 <br> 
 <span class="text_nodes">Sq. Ft.:</span> <strong> 1,055 </strong> 
 <br> 
 <span class="text_nodes">Type:</span> <strong>Condo</strong> 
 <br>
 </div>

.property-info > span:nth-child(1):before {
    content: '\f236';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration:none;
}

.property-info > span:nth-child(2):before {
    content: '\f2cd';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration:none;
}

.property-info > span:nth-child(3):before {
    content: '\f015';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration:none;
}