jquery 执行操作，除非 div 已经存在，然后替换答案

【问题标题】：jquery do action unless div already exists, then replacejquery 执行操作，除非 div 已经存在，然后替换
【发布时间】：2012-10-28 22:51:21
【问题描述】：

我有一个 jquery 数据表，在该数据表中，每一行都有一个列，可让您查看该行的详细信息。我不需要数据表 row_details 的东西。

这个想法是，一旦单击“视图”，文本就会变为隐藏，并且带有 row_### 的 div 将附加到内容主体。然后，如果在显示该行时单击相同的按钮，它将隐藏它。此外，如果有人单击另一行的视图，则上一行文本应变回隐藏，div 隐藏，并且应显示刚刚单击的行。

这是我目前所拥有的：

$("a[class^=view]").click(function() {
    var id = $(this).attr('class').match(/\d{1,}/);

    if( $("div[id^=report_]").size() >= 1) {
     // Slide up, remove
             // Change text back to view    
    } else {
             // Append and change text to Hide
            }
});

如果我在已显示某个详细信息的情况下单击另一个“视图”，它会在当前 div 中添加一个新 div 并将相同的新 div 附加到内容主体.. 显然不是我正在寻找的效果所以某处我的逻辑是错误的。有什么想法吗？

【问题讨论】：

您不应该使用size，它已被弃用。使用length 属性，如if ( $("div[id^=report_]").length ) { ... }
您可以将/\d{1,}/替换为/\d+/
就像这样：1) 如果不存在元素，则附加它并将文本更改为“隐藏” 2) 如果单击相同的“查看”链接，删除元素并将文本更改回查看。 3）如果一个元素存在，删除该元素并将其相关文本更改回视图，同时附加一个新元素并将其文本更改为隐藏。我得到了添加/删除的东西，但是当我附加新的 div 时，它会自动删除，因为它在相同的条件下检查 class^=report_ 的多个元素
这是否接近您想要的...规格仍不清楚jsfiddle.net/Jt45Y

标签： jquery datatables

【解决方案1】：

知道了。有点乱，但它的工作原理。如果有其他方法感兴趣。这是解决方案：

$("a[class^=view]").click(function() {
    var id = $(this).attr('class').match(/\d+/);

    if($(this).text() == "Hide") {
        $(this).text("View");
        $("#report").html(null);
    } else {
        $("a[class^=view_]").each(function(){$(this).text("View");});
        $(this).text("Hide");
        $("#report").html("<div id='report_"+id+"'>viewing report "+id+"</div>").slideDown();
    }
});

【讨论】：

如果你想删除之前的按钮，还需要更改之前激活的按钮的文本。可以为按钮添加一个“活动”类，以便轻松找到之前的按钮

【解决方案2】：

要知道一个元素是否已经存在，我在父元素上使用 jquery 的 find，寻找他的孩子...像这样：

if($('#parent_container').find('#child_element').length>0){
     //element(s) exists
}else{
     //element(s) not found
}

【讨论】：