怎樣才能增加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>