Question

我有以下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.
}

修改

我需要显示具有匹配文本的span的行。已经更新了html一点，请参阅更新的问题。

我能够将完整的数据作为所有跨度组合的文本。有没有办法在特定div中获得跨度数组？

Answer 1

您可以使用: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/

Answer 2

nodes [i]是一个jquery对象，我猜测它没有childNodes属性所以你应该使用nodes [i] .get（0）.childNodes而不是...

使用jquery在子节点中获取文本

修改

2 个答案: