2

私は次のhtmlページ構造を持っています:

<div class="result-row clearfix">
    <span>Name1</span>
    <span>city1</span>
    <span>phone1</span>
    <span>details1</span>
</div>
<div class="result-row clearfix">
    <span>Name2</span>
    <span>city2</span>
    <span>phone2</span>
    <span>details2</span>
</div>
... 
... many such similar divs

そして、ユーザーから簡単な入力フィールドを取得しました

<label for="name">Name</label> <br />
<input type="text" name="name" autocomplete="off" /> <br />

<label for="city">City</label> <br />
<input type="text" name="city" autocomplete="off" /> <br />

ぼかしイベントでは、検索するテキストを持たないすべての div を非表示にし、一致した div (つまり、span タグ内にテキストを持つ div) のみを表示したいと思います。

jqueryを使用してこれを取得して照合することはできません。私は次のことを試しました：

var nodes = $(".result-row");
console.log("Nodes length: "+nodes.length);  // Displays the correct number of child nodes

for(var i=0;i < nodes.length; i++) {
    var cur = nodes[i];
    console.log(cur);  // Displays '#text' in browser js console log.
    console.log(cur.childNodes[0]);  // Gives undefined. Expecting to get the 1st span tag here.
}

編集

テキストが一致するスパンを持つ行を表示する必要があります。html を少し更新しました。更新された質問を参照してください。

すべてのスパンを組み合わせたテキストとして完全なデータを取得できます。特定の div 内のスパンの配列を取得する方法はありますか?

4

2 に答える 2

3

:containsセレクターを使用できます：

var $row = $('.result-row');
$('input[type=text]').blur(function() {
    var val = this.value;
    $row.hide();
    $row.has('span:contains("'+val+'")').show()
})

http://jsfiddle.net/x3VtX/

于 2012-10-07T16:38:50.627 に答える
1

nodes[i] は、私が推測する childNodes プロパティを持たない jquery オブジェクトです。そのため、代わりに nodes[i].get(0).childNodes を使用する必要があります...

于 2012-10-07T16:34:58.163 に答える