如何为点击事件的 div 制作 jQuery 唯一 ID？答案

【问题标题】：How do i make jQuery unique ID for div for click event?如何为点击事件的 div 制作 jQuery 唯一 ID？
【发布时间】：2014-08-30 14:16:32
【问题描述】：

我需要在选择时将 div 元素附加到另一个 div，我已经做到了，而且每次我选择新的选择时，它都应该附加新的 div。

问题是，那些附加的 div 有相同的 id，所以我不能删除特定的元素。我通过声明 var 并将 id 与字符串组合使它们独一无二，例如：id="add_marke'+selectedKey+'" 但我不能这样做jQuery( "#add_marke'+selectedKey+'" ).click(function() {

制作唯一ID时如何选择ID？

var selectedKey = jQuery("#model").val();
jQuery('#example').append('' + '<div class="add_marke" id="add_marke' +
  selectedKey + '" >' +
  '   <div class="car_tag"><span  class="lbl"><span id="car_name" class="icon-remove"></span></div> ' +
  '&nbsp' +
  '   <select  name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>' +
  '&nbsp' + '</div>');
jQuery("#car_name").click(function() {
  jQuery("#add_marke\\.selectedKey").remove();
});

【问题讨论】：

不要定义点击 id 而是整个类并在点击事件中检查 id。 $(document).on('.add_marker', function(e) {...});
您可以使用 jquery 最接近选择器。为按钮提供类名并为主 div 提供类名。现在做这件事。 $('.buttonSelector').on('click',function(e){ $(this).closet('.parentDiv').remove()})

标签： javascript jquery

【解决方案1】：

您可以像使用预定义前缀一样添加 ID：

... id="add_marke_' + selectedKey + '" ...

然后为所有 ID 以 add_marke_:

开头的元素绑定点击与 jQuery 选择器

$('div[id^="add_marke_"]').click()

【讨论】：

【解决方案2】：

您需要做的是将点击处理程序添加到所有这些 div 共享的类名中。一旦点击处理程序被触发，您就可以提取元素的相关id 并从该id 组成一个选择器。

jQuery( ".class_name" ).click(function() {
  var id = jQuery( this ).attr( "id" );
  jQuery( "#" + id ).remove();
});

【讨论】：

【解决方案3】：

你可以使用

jQuery( ".icon-remove" ).click(function() {
        jQuery(this).parent().parent().parent().remove();
    });

【讨论】：

请说明您的代码的作用以及它如何回答问题。如果您得到一个代码 sn-p 作为答案，您可能不知道如何处理它。答案应该为 OP 和未来的访问者提供有关如何调试和解决问题的指导。指出您的代码背后的想法是什么，对理解问题以及应用或修改您的解决方案有很大帮助。
@Palec 感谢您的建议。我现在继续。 :)

【解决方案4】：

由于 ID 必须是唯一的，因此您有以下两种选择之一：

将某种计数器或数字标识符附加到 ID，因此您始终拥有唯一的 ID（例如，计算元素的数量，然后将您的 ID 归为my-id-1、my-id-2 等）在这里您可以必须以仅搜索以给定模式div[id^="my-id-"] 开头的那些 ID 的方式编写 DOM 查询
使用class 根据您希望为所有这些具有相同结构的<div> 元素提供的任何交互来识别对象。在这里，您可以基于公共类进行查询，在您的情况下为 .add_marke。

【讨论】：

【解决方案5】：

<div class="parentElement">
   <span>jagadeesh</span>
   <span class="icon-remove car-remove"></span>
   <button >Remove</button>
</div>

    $('.car-remove').on('click',function(){
        var mainElement = $(this).closest('.parentElement')
        /// do what ever you want with main element. it selects only current parent
        //element
        mainElement.remove();
    })

【讨论】：

【解决方案6】：

你想做这样的事情吗？

http://jsfiddle.net/Wg9FE/1/

var selectedKey = "someId";

jQuery('#example').append('' +
            '<div class="add_marke" id="add_marke'+selectedKey+'" >' +
            '   <div class="car_tag"><span  class="lbl"><div id="car_name" class="icon-remove"></div></div> ' + '&nbsp' +
            '   <select  name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>'+ '&nbsp' +
            '</div>');

jQuery( "#car_name" ).click(function() {
             jQuery( "#add_marke" + selectedKey ).remove();
        });

【讨论】：