Question

您好我想 SELECT 不在元素下的文本节点。但是我希望选择 1比1。

例如，我只想 SELECT 第二个文本节点“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>

提前致谢！

Answer 1

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

var html = $('.property-info').html();
$('.property-info').html(html.replace(/(\s*)([^:\W]*)(.*)<strong>(.*)<\/strong>/g, '<i class="icon $2-icon">i</i> $2$3<strong>$4</strong>'));

.icon {
  color: white;
  border-radius: 15px;
  min-width: 15px;
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
}

.Beds-icon {
  background-color: green;
}

.Baths-icon {
  background-color: red;
}

.Sq-icon {
  background-color: blue;
}

.Type-icon {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

使用的正则表达式：/(\s*)([^:\W]*)(.*)(.*)<\/strong>/g

替换为字符串：i $2$3$4

然后应用一些CSS使其看起来像图标。

Answer 2

迭代contents()并检查文本节点的下一个兄弟是并使用对象存储基于文本的图标html的方法

var icons = {
  "Beds:": '[bed-icon]',
  "Baths:": '[bath-icon]'
}


$('.property-info').contents().each(function() {
  var $node = $(this);
  if (this.nodeType === 3 && $node.next().is('strong')) {
    var icon = icons[$node.text().trim()] || '';
    $node.before(icon);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

这是一个小提琴：https://jsfiddle.net/seo8mpoy/

* HTML添加了跨度，因此您可以抓取文本。注意！！我添加了你需要添加的跨度aswel。

 <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>

jquery的

$('.property-info').on('click',function(){
  var t = $(this).find('span');
  t.each(function( index ) {
    console.log( index + ": " + $( this ).text() );
  });
});

Answer 4

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

为您提供节点0的文本

如果您想在此之前或之后添加内容

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

Answer 5

您可以尝试使用以下代码仅提取文本并添加您想要添加的内容。

JSFiddle

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>

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);
  }
}

Answer 6

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

这就是我的目标：

本规范＆＃34;包装＆＃34;所有带有＆＃34; span＆＃34;的节点，我添加了一个类＆＃34; text_nodes＆＃34;在它上面。

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

由于文本节点现在已经结束，我可以通过css轻松选择它们，并将图标添加为＆＃34;内容＆＃34;。

 <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>

这是我用来添加图标的css代码。（PS我使用了图标的unicodes）

.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;
}

以下是它现在的样子。

非常感谢那些帮助和回答的人。你们都给了我一个关于如何解决这个问题的想法。：）

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

6 个答案: