Question

<ul id="ulclass">
    <li><a href="#">AAA</a></li>
    <li><a href="#">BBB</a></li>
    <li><a href="#">CCC</a></li>
</ul>

var textBoxValue = //value from textbox
$("ul#ulclass").find('li').filter(function() 
{
    if($(this).find("a").val() == textBoxValue)
        return true;
    else
        return false;
}).css('background-color', 'red'); //optional

我基本上试图制作一个基本的自动完成功能。用户将"A"写入文本框，jQuery过滤href text和<a>之间的每个</a>以匹配，使用自定义CSS样式进行响应，但它是可选的。

我在过滤它时卡住了。必须修复filter函数。

任何帮助都将不胜感激。

Answer 1

.val()用于表单输入;锚点没有值，但确实有.text()。关于代码的其他所有内容看起来都应该可行，但我可以建议一些样式改进：

var textBoxValue = /* value from textbox */;
$("#ulclass").find('li').filter(function() 
{
    return $(this).find("a").text() === textBoxValue;
}).css('background-color', 'red');

N.B。如果HTML或用户提供的字符串中存在exta空格，则在检查相等性时可能需要$.trim()值。

Answer 2

基本示例：

var $rows = $('#ulclass li');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.removeClass('active').filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return val && !!~text.indexOf(val);
    }).addClass('active');
});

行动中：http://jsfiddle.net/QkMHB/1/

Answer 3

改变这个 -

if($(this).find("a").val() == textBoxValue)

到此 -

if($(this).find("a").text() == textBoxValue)

Anchor标签没有值。

Answer 4

<ul id="ulclass">
    <li><a href="#">AAA</a></li>
    <li><a href="#">BBB</a></li>
    <li><a href="#">CCC</a></li>
</ul>

var textBoxValue = //value from textbox
$("#ulclass").find('li').filter(function() 
{
    return $(this).find('a').text().toLowerCase()==textBoxValue.toLowerCase();
}).css('background-color', 'red');

如果您想要区分大小写，请删除toLowerCase。 plus您可以直接使用id，因为它们是唯一的。

如何根据文本框中的值过滤<li>在UL内部的href值？</li>

4 个答案: