Question

所以我正在使用搜索栏，类似于http://www.justdelete.me上的界面。

我已在每个项目上添加了标签，因此我可以搜索相关的字词，但仍会得到相同的结果。所以我基本上在每个列表项中都有一个列表。这是HTML，所以你知道我的意思：

    <ul class="list">
        <li>
            <h2 class='Item-list'>
                Car
            </h2>
            <ul class="tags" id='car'>
                <li class="tag">vehicle</li> 
                <li class="tag">autombile</li>
            </ul>
        </li>
        <li>
            <h2 class='Item-list'>
                House
            </h2>
            <ul class="tags" id='house'>
                <li class="tag">house</li>
                <li class="tag">domicile</li>
                <li class="tag">residence</li>
                <li class="tag">house</li>
                <li class="tag">home</li>
            </ul>       
        </li>
        <li>
            <h2 class='Item-list'>
                Bag
            </h2>
            <ul class="tags" id='bag'>
                <li class="tag">bag</li>
                <li class="tag">bag</li>
                <li class="tag">rucksack</li>
                <li class="tag">suitcase</li>
            </ul>   
        </li>

我隐藏和显示项目的jquery如下：

    //hide and show items
    $(".tags:contains('" + searchquery + "')").parentsUntil(this, 'li').removeClass('no-display');
    $(".tags:not(:contains('" + searchquery + "'))").parentsUntil(this, 'li').addClass('no-display');

所以直到现在没问题。

当我尝试将包含项目标题的h2更改为我在搜索框中输入的内容时，会出现问题。

所以说我输入'V'。我想我的车h2，改为车辆，因为它是汽车的标签之一。

我尝试使用以下代码：

    "use strict";
    $(".tag:contains('" + searchquery + "')").parentsUntil(this, 'li').children().first().replaceWith('<h2 class="Item-list">'+this+' </h2>');

但不是更改为“车辆”，而是更改为文本：[对象窗口]

非常感谢你！

编辑：这是小提琴。 http://jsfiddle.net/6f8F8/2/

Answer 1

this引用当前对象，您需要在元素内部获取text或html，因此请尝试使用 text() ：

$(".tag:contains('" + searchquery + "')").parentsUntil(this, 'li').children().first().replaceWith('<h2 class="Item-list">'+ $(this).text() +' </h2>');

或 html() ：

$(".tag:contains('" + searchquery + "')").parentsUntil(this, 'li').children().first().replaceWith('<h2 class="Item-list">'+ $(this).html() +' </h2>');

JQuery：这返回[对象窗口]

1 个答案: