Question

我的页面上有几个div以

的方式

<div id="{{ myId }}" class="typelist"><!-- content goes here --></div>

此外，还有以下方式的“链接”列表：

<a href="#" onclick="showThis({{ myId }})">{{ myDescriptiveName }}</a>

通讯员JS部分看起来像这样：

function showThis(id) {
    var divs = $('div.typelist');
    divs.hide();
    divs.find('#' + id).show();
}

我想要做的是，在当前选择中搜索ID为id的div，并将其切换为“可见”。我现在明白了，find()只搜索儿童和“孙子”，这解释了为什么上述情况不能按预期发挥作用。

但是，如何在当前选择中正确找到所需的div？谷歌搜索没有向我提供任何有用的信息。

Answer 1

应该是

function showThis(id) {
    var divs = $('div.typelist');
    divs.hide();
    $('#' + id).show();
    //or divs.filter('#' + id).show();
    //or divs.filter('[id="' + id + '"]').show();
}

当您使用.find()时，它会查找divs元素的后代，但在您的情况下，您要查找的元素属于divs元素。

在这种情况下，您需要使用.filter()代替.find()，但由于在这种情况下您拥有ID，因此您可以直接使用id-selector

Answer 2

function showThis(id) {
    var divs = $('div.typelist');
    divs.hide();
    $('#' + id, divs).show();
}

这将在您的选择中查找ID。但无论如何，您的ID应该是唯一的。所以Arun P Johny的回答是最好的。

JQuery的子选择没有按预期工作

2 个答案: