怎样才能增加ID从阵列

Question

featching之后我像一块阵列的数据：

$array = { 
    "sections" : { 
     "H": { 
      "name": "dummy", 
      "html": "<div id="dummy">d</div>" 
     } 
    } 
} 

我featching上点击事件的数据这样

$htmlData = $array["sections"]["H"]['html']; 

现在我希望：点击按钮后，HTML出来（工作）和ID虚拟会增加每次点击

默认情况下，它是：

<div id="dummy">d</div> 

在首次保持不变：

<div id="dummy">d</div> 

但在第二次点击就变成：

<div id="dummy--1">d</div> 

在第三点击：

<div id="dummy--2">d</div> 

等。

$array = { 
 
\t "sections" : { 
 
\t \t "H": { 
 
\t \t \t "name": "dummy", 
 
\t \t \t "html": "<div id=\"dummy\">d</div>" 
 
\t \t } 
 
\t } 
 
} 
 

 
$(function(){ 
 
\t $('#cm').click(function(event) { 
 
\t \t $htmlData = $array["sections"]["H"]['html']; 
 
    console.log($htmlData); 
 
\t }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="cm">Click me</button>

Answer 1

使用该和第二点击解析HTML和更新id属性和使用jQuery取回HTML计数器变量。

$array = { 
 
    "sections": { 
 
    "H": { 
 
     "name": "dummy", 
 
     "html": "<div id=\"dummy\">d</div>" 
 
    } 
 
    } 
 
} 
 

 
$(function() { 
 
    // counter which holds the counts of click 
 
    var count = -1; 
 
    $('#cm').click(function(event) { 
 
    $htmlData = $array["sections"]["H"]['html']; 
 
    // check the count value for second click 
 
    if (++count > 0) 
 
     // in case of not a first click parse the html and generate a jQuery object 
 
     $htmlData = $($htmlData).attr('id', function(i, v) { 
 
     // update the attrubute value 
 
     return v + '--' + count 
 
     // get back the html content from the DOM object 
 
     })[0].outerHTML 
 
    console.log($htmlData); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="cm">Click me</button>

Answer 2

你需要跟踪的点击次数计数的变量：counter每当有一个点击，你增加这个计数器，并相应地更改HTML。

var counter = 0; 
 

 
$array = { 
 
    "sections": { 
 
     "H": { 
 
      "name": "dummy", 
 
      "html": "<div id=\"dummy\">d</div>" 
 
     } 
 
    } 
 
} 
 

 
$(function() { 
 
    $('#cm').click(function(event) { 
 
     $htmlData = $array["sections"]["H"]['html']; 
 
     console.log($htmlData); 
 
     counter++; 
 
     $array["sections"]["H"]['html'] = "<div id=\"dummy--" + counter + "\">d</div>" 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="cm">Click me</button>

Answer 3

如果你希望你的ID是 “dummy1” “dummy2” 上点击每一次，只是在它的计数器，如下面

var i=0; 
$(function(){ 
    $('#cm').click(function(event) { 
     i++; 
     $htmlData = $array["sections"]["H"]['html']="html": "<div id=\"dummy"+i+"\">d</div>" 
     console.log($htmlData); 
    }); 
}) 

Answer 4

$array = { 
 
    "sections" : { 
 
     "H": { 
 
      "name": "dummy", 
 
      "counter": 0, 
 
      "html": "<div id=\"{id}\">d</div>" 
 
     } 
 
    } 
 
} 
 

 
$(function(){ 
 
    $('#cm').click(function(event) { 
 
     var $arr = $array["sections"]["H"], 
 
      $name = $arr.name, 
 
      $counter = $arr.counter, 
 
      $htmlData = $arr.html, 
 
      $id; 
 

 
     if ($counter > 0) { 
 
      $id = $name + "--" + $counter; 
 
     } else { 
 
      $id = $name; 
 
     } 
 

 
     console.log($htmlData.replace("{id}", $id)); 
 
     $array["sections"]["H"]["counter"] = ++$counter; 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="cm">Click me</button>