JQUERY経由で2番目のテキストノードを選択する方法

Question

こんにちは。SELECT要素の下にないテキストノード。しかし、私は例えば、私は唯一の「風呂」である 2番目のテキストノードを選択したい1.

等によりそれら1を選択たい。

これが可能ですか？

私はこれをしているので、それらのテキストノードの前にいくつかのアイコンを追加することができます。ここで

は、コードは次のとおりです。事前に

<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

はフィドルです：https://jsfiddle.net/seo8mpoy/

* 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を置き換えることができますjqueryの

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

Answer 2

：

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>(.*)<\/strong>/g

文字列に置き換えられました：<i class="icon $2-icon">i</i> $2$3<strong>$4</strong>

次に、いくつかのCSSがアイコンのように見えるように適用されました。

Answer 3

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

は、ノード0

のテキストとあなたがこの

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

Answer 4

前または後に何かを追加したい場合は、テキストのみを抽出するための以下のコードを試してみて、あなたが望むものは何でも追加することができます提供します前に追加する。テキスト・ノードの次の兄弟が<strong>あり、ストアアイコンにオブジェクトを使用する場合contents()及び検査を反復する

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 5

一つのアプローチ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 6

私はすべてのあなたの答えを試してみましたが、まだいくつかの研究を行ないました。

は、ここに私が思い付いたものです：このコード

「スパン」を持つすべてのノードを「ラップ」、私はその上に、クラス「text_nodes」を追加しました。

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

とテキストノードが今までラップされているので、私は簡単にCSSを介して、それらを個別に選択して、「コンテンツ」としてのアイコンを追加することができます。

<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コードです。ここでは、今どのように見えるのです

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

（PS私はアイコンにユニコードを使用しました）。

助けたと答えた人のためにありがとうございました。あなたは皆、この問題を解決する方法について私に考えを与えました。 :)