Jquery 使用另一个元素的类名按ID查找元素

我有一个菜单-每个菜单项都有一个类名。单击菜单项时，我使用JQuery查找具有匹配ID名称的div。问题是搜索并不严格。如果某个东西的类名像elo-1，而我的div id名为elo-1和elo-11，那么我这样做是不可能得到elo-1的

我想要一个精确的匹配。我想点击elo-1，只获取elo-1，而不是elo-1、elo-11、elo-12等。有人有什么想法吗

以下是我正在使用的代码：

        $(document).ready(function() {

    var myLayoutId = $(this).attr("layoutId");


    $("#start_page").show().siblings().hide();
    $("#navBar").hide();
    $("#refs").hide();

    $("li").click(function() {
        var thisID = $(this).attr("class");
        $("#mainBdy div:#"+thisID).show().siblings().hide();
        $('#mainBdy div[id^="'+thisID+'"]').show();


        $("#mainBdy div:#"+thisID).css("width","30%");
        $("#mainBdy div:#"+thisID).css("margin-left","-80px");
        $("#mainBdy div:#"+thisID).css("margin-top","-50px");
        $("#mainBdy div:#"+thisID).css("float","left");


    });


    $("#start_page_accept").click(function() {
        $("#navBar").show();
        $("#refs").show();
        $("#start_page").hide().next().show();
    });

    $("#menu").collapsible({
        effect: "slide",             // The effect to use when expanding and collapsing the menu. 
        initialCollapse: true       // When true, collapses the menu when the page loads.
    });

});

---

修改选择器以避免以匹配开头：

$'mainBdy div[id^='+thisID+']'.show； 这将匹配以您的值开头的任何内容，而这不是您想要的：

$'mainBdy div[id='+thisID+']'.show； 这只匹配id属性等于您的值的项目

补充建议 还要注意，您正在绑定到单个列表项：

$li.click； 这可能会成为应用程序的任务，因为您正在为页面上的每个新列表项添加事件处理程序。事件委派是一种更好的方法，它包括向祖先元素添加一个事件处理程序，使用事件冒泡来响应嵌套项上的事件

马什卢普酒店 假设这是我们在另外100个列表项中的标记，下面是我们的活动委派说明：

$list.onclick，li，function{ $+this.className.show.css{ 宽度：“30%”， marginLeft:“-80px”， marginTop:“-50px”， 浮动：“左” } .兄弟姐妹。隐藏； }; 无论何时在列表元素上或在列表元素内发生单击事件，我们都将评估接收到单击的元素的目标是否与选择器li匹配。如果它这样做，我们将触发我们的函数，否则，我们将忽略它并让它在DOM中冒泡。

替换此：

    $("#mainBdy div:#"+thisID).show().siblings().hide();
    $('#mainBdy div[id^="'+thisID+'"]').show();


    $("#mainBdy div:#"+thisID).css("width","30%");
    $("#mainBdy div:#"+thisID).css("margin-left","-80px");
    $("#mainBdy div:#"+thisID).css("margin-top","-50px");
    $("#mainBdy div:#"+thisID).css("float","left");

为此：

$('#' + thisID).show().css({
    'width': '30%',
    'margin-left': '-80px',
    'margin-top': '-50px',
    'float': 'left'
}).siblings().hide();

几点注意：

jQuery中的链接功能非常强大，如果要使用同一元素执行多个操作，可以避免重新查询DOM。同样，您也可以通过var$div=$+thisID；-在这两种情况下，您都不想反复使用相同的选择器。 ID在文档中应该是唯一的，因此我假设文档中只有一个ID为elo-1的元素。如果这是真的（应该是真的），那么执行像“mainBdy div[id^='+thisID+']”这样复杂的选择器只会阻止jQuery使用本机getElementById，它的效率要高得多，更不用说更干净了。 如您所见，css接受一个对象，因此您不必多次调用它。我个人只需在菜单项中添加一个类，并在样式表中处理样式。从可维护性的角度来看，这要容易得多。

---

要仅选择elo-1，请使用$elo-1。此外，此处的语法无效：div:+thisID remove:必须使用.end返回正确的div。。或在遍历到siblings@wirey哎呀，我刚听到。修好了，谢谢。我把你的建议改了一点。这是我的更改：$navBar.onclick，li，函数{$'mainBdy div[class='+This.id+']'''..show.css{width:'30%'，marginLeft:'-80px'，marginTop:'-50px'，float:'left'}.sides hides；$'mainBdy div[class='+This.id+'.]show；}；