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] 是一个 jquery 对象，我猜它没有 childNodes 属性..所以你应该使用 nodes[i].get(0).childNodes 代替......

于 2012-10-07T16:34:58.163 回答