Question

我想知道，如果有一个带有当前点击div的id属性的子div。

$(document).on('click', '.sw-item' , function() {
    if ($("#softwarelist").find("div").attr('id', '' + $(this).attr("id") + '').length = 0) {
        $("#softwarelist").append("<div id='" + $(this).attr("id") + "' class='softwarelist-item'>" + $(this).html() + "</div>");
    }
});

当我在#softwarelist中找到一个子div时，我不想将其添加（添加）到softwarelist div。附加有效，但if语句错误。有人知道正确的if语句吗？

Answer 1

你拥有它的方式是设置id。向.attr()提供第二个参数将设置而不是get

if ($("#softwarelist").find("div").attr('id') == '' + $(this).attr("id") + '') {

Answer 2

您可以获取您正在寻找的ID，然后将其转换为选择器并使用.find()查看是否在#softwarelist中找到了该选择器：

$(document).on('click', '.sw-item' , function() {
    if ($("#softwarelist").find("#id" + this.id).length) {
       // child id found
    }
});

Answer 3

解决方案

$(document).on('click', '.sw-item' , function() {
    if ($("#softwarelist").find("div[id = '" + $(this).attr("id") + "']").length == 0) {
        $("#softwarelist").append("<div id='" + $(this).attr("id") + "' class='softwarelist-item'>" + $(this).html() + "</div>");
    }
});

Answer 4

用户Itay Gal已经指出id应该是唯一的。

我想我现在明白你的要求了。如果用户点击了某个产品，则该产品只应添加到softwareList一次。因此，您希望测试此特定产品是否已在列表中，并仅在尚未添加时才添加。

包含产品列表的HTML

<div id="softwareItems">
<div id="p7" class="sw-item">Windows 7</div>
<div id="p2013" class="sw-item">Visual Studio 2013</div>
<div id="p00" class="sw-item">Beyond Compare</div>
</div>

软件列表

上面点击的产品会添加到软件列表

<div id="softwarelist">
     <h3>You picked these items</h3>
</div>

为了使代码有效html，我使用data-product作为属性

稍微改了一下

$(document).on('click', '.sw-item' , function() {               
    var thisID = $(this).attr("id");
    var softwareList = $("#softwarelist");
    var elementsFound = softwareList.find("div[data-product='"+thisID +"']");

    if (elementsFound.length == 0) {
         softwareList.append("<div data-product='" +thisID + "'>"  
                                 + $(this).html()  
                           + "</div>");
    }    
});

通过这种方式，您可以测试产品是否已经在软件列表中，而无需使用id两次创建无效的html。

使用jquery查找具有特定id值的子元素

4 个答案:

包含产品列表的HTML

软件列表