通过指定的文本检查项目列表 /w Jquery

Checking a list for item via specified text /w Jquery

本文关键字：列表 项目 Jquery 检查 文本      更新时间：2023-09-26
这里

对jquery来说相对较新。基本上，在页面启动时，我有一个正在检索的元素列表，我想检查此列表是否包含"Body"元素，如果是，则我希望列表中的该项目设置为选中。

我已经根据我在其他地方捏的一些代码尝试过这个，所以我不确定是否需要".length"部分，但似乎都不起作用。

var bodyName = "Body";
if ($('#pageAreaList li:contains(' + bodyName + ')').length) {
    $(this).addClass("selected");
    //Other stuff
}

以下是填充列表的位置。 

 function BuildPageAreaListHtml() {
        $("#pageAreaList").empty();
        ResetEditor();
        $.each(areaList, function (key, value) {
            var pageArea = $("<li class='selectable'><span class='listItemTitle'>" 
            + value.Name + "</span> - <span class='comment'>" 
            + value.Description + "</span></li>");
            pageArea.data("id", value.Id);
            pageArea.click(OnPageAreaClick);
            $("#pageAreaList").append(pageArea);
        });
    }

编辑：HTML 按要求：

<div class="row">
<div class="label">Page Areas:</div>
<div><ul id="pageAreaList"></ul></div>
</div>

编辑：检查正文项的元素。

<li class="selectable"><span class="listItemTitle">Body</span> - 
<span class="comment">Contains the main content on a page</span></li>

它对我有用：jsfiddle。为什么说它不起作用？

（1）如果我看线：

$(this).addClass("selected");

也许这条线没有做你所期望的事情。 $(this)不是包含"身体"的<li>。

为此，您需要类似

$('#pageAreaList li:contains(' + bodyName + ')').each(function () {
    $(this).addClass("selected");
});

（2）你确定文本是"身体"而不是"身体"吗？ :contains区分大小写。

（3）在我看来，填写清单时更容易检查。

    $.each(areaList, function (key, value) {
        var pageArea = $("<li class='selectable'><span class='listItemTitle'>" 
        + value.Name + "</span> - <span class='comment'>" 
        + value.Description + "</span></li>");
        pageArea.data("id", value.Id);
        pageArea.click(OnPageAreaClick);
        // Added
        pageArea.toggleClass('selected', value.Name.indexOf('Body') >= 0);
        $("#pageAreaList").append(pageArea);
    });
相关文章：