如何在li中動態獲取動態創建的ID

Question

我一直在嘗試學習js（以及一堆jquery），並且在嘗試找到一種結合我發現的解決方案的方法時遇到了兩個困難。

只是一點警告，此代碼是我最近完成的一些教程的混合。 我對js很陌生。

因此，我從基本的html開始。

<body>  
<ol id="liste">
<li class="active">   
</li>
<li>      
</li>
<li>
</li>   
</ol>
<div id="main_ima">



</div>
<script src="js/main.js"></script>
</body>

我想為每個“ li”創建id，因此在main.js中添加以下代碼：

var idVar = $("#liste").find("li").each(function(index){
$(this).attr("id","num-li-"+index);
});

到目前為止效果很好。 每當我添加一個新的li時，它都會得到一個新的id。 我也將其放入var中，因為以后需要使用它。

在控制台中，如果輸入idVar，它將顯示li的整個列表。 如果我輸入idVar [3]。 它只給了我與[3]關聯的li。 完善。

現在，當單擊li之一時，我想讓某些東西出現。 例如，我將使用[3]。 所以我將此添加到我的main.js

var imaContainer = document.getElementById('main_ima')
var listed = document.getElementById('liste');



idVar[3].addEventListener("click", appar); 


function appar(){

$(idVar[3]).addClass("active").siblings().removeClass("active");



var imaSel = new XMLHttpRequest();

imaSel.open('GET', 'https://domain.link.to.file.json');
imaSel.onload = function() {

var imaLo = JSON.parse(imaSel.responseText);
renderHTML(imaLo); 
};
imaSel.send();


};


function renderHTML(data) {
  var htmlS = "";

for (i = 0; i < data.length; i++) {
                           htmlS += "<p>" + data[i].name + " is a " + data[i].species + ".</p>";                           

}                              


imaContainer.insertAdjacentHTML('beforeend', htmlS);

}

只是附帶說明，我為CSS添加了添加/刪除“活動”類。

因此，當我單擊li [3]時，它幾乎可以按預期工作。 唯一的事情是，當我重新單擊[3]時，它將第二次產生結果。 再一次，如果我第三次單擊它，它將第三次產生結果，而不會刪除過去的結果。 （這不完全是我想要的。只是第一個結果會更好。）

但這不是我面臨的主要問題。

我希望根據單擊的li的ID動態檢測[number]。 我可以以非常難看的方式為我擁有的每個[數字]復制並粘貼此代碼。 它會工作。 但是，如果我想添加更多li元素，我將需要添加上述代碼的更多副本和粘貼，這可能給我帶來巨大的文件負擔而已。 雖然可以，但這肯定不是最好的方法。

我敢肯定這可以動態完成。但這就是為什么我在這里。 :)

之后，將動態添加到單擊的li后，我還希望根據li id動態更改鏈接。 例如，代替：

imaSel.open('GET', 'https://domain.link.to.file.json');

就像是：

imaSel.open('GET', "https://domain.link.to.file" + var +".json");

var等於單擊的li的[3]號。

在這種情況下，當我嘗試使用for循環添加var時，總是得到“ var = max.length”而不是“ var = [clicked itemid]”。

所以你有它。 您需要更多詳細信息嗎？

這是我第一次嘗試JS和/或Jquery。 我已經玩了幾天，但是當我尋找答案時，當我實現“解決方案”時，總是給我帶來一些新問題。 因此，我向您展示了與我正在尋找的代碼最接近的IMO。

希望我離可行的事情不太遠，並且不如我的解決方案那么大。 :)

感謝您的寶貴時間，我們將為您提供所有幫助。

Answer 1

這里有一些建議：

您無需為li分配id屬性。 實際上，您永遠不需要該id 。 這也將正常工作（請注意選擇器中的> ，這將使find調用變得不必要）：
```
 var $li = $("#liste > li"); 
```
現在，您可以將每個li稱為$li[3] ，盡管那不是“最佳實踐”。 更好的是$li.get(3) 。 我也喜歡約定，當它是jQuery選擇的結果時，以$開頭變量。 它提供了一個提示，您可以將jQuery方法應用於該提示。
您無需為每個li單獨分配一個點擊處理程序。 與jQuery on （而不是原生addEventListener ），你可以一次給所有他們中的一個事件處理程序。
```
 $li.on('click', apar) 
```
您為on定義的回調會將this設置為已單擊的特定li元素，因此您可以執行以下操作：
```
 $(this).addClass("active").siblings().removeClass("active"); 
```
...無需任何數組查找。
jQuery為幾種類型的HTTP請求提供了簡單的功能，因此您無需使用XMLHttpRequest 。 實際上，有一個專門用於獲取JSON的代碼，因此您甚至不必解析響應：
```
 $.getJSON('https://domain.link.to.file.json', renderHTML); 
```

jQuery index()方法可以為您提供li的序列號：

 $.getJSON('https://domain.link.to.file' + $(this).index() + '.json', renderHTML);

要替換某個元素的內部HTML，可以使用jQuery html方法：
```
 $('#main_ima').html(htmlS); 
```
還要注意，您不需要DOM本機的getElementById方法，jQuery可以使用簡短的$('#main_ima')為您查找。

例

這是一個使用偽造的JSON服務服務器的工作示例：

 $("#liste > li").on('click', apar); function apar() { $(this).addClass("active").siblings().removeClass("active"); $.getJSON('https://jsonplaceholder.typicode.com/posts/' + (1+$(this).index()), renderHTML); } function renderHTML(data) { // This particular JSON request returns an object with body property var htmlS = data.body; $('#main_ima').html(htmlS); } // On page load, click on the first `li` to automatically load the data for it $('#liste > li:first').click();

 #liste { width: 40px } .active { background: yellow }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol id="liste"> <li class="active">load 1</li> <li>load 2</li> <li>load 3</li> </ol> <div id="main_ima"></div>

Answer 2

以下是您主要關心的問題，即如何使用jquery動態獲取ID：

 $('.listen-to-me').click(function() { //Add event listener to class var elementId = $(this).attr('id'); //Get the 'id' attribute of the element clicked var idNumber = elementId.substring(elementId.indexOf("-") +1); //Get the index of the "-" in the string, and then cut everything prior alert(idNumber); //The final result });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li id="test-1" class="listen-to-me">1</li> <li id="test-2" class="listen-to-me">2</li> <li id="test-3" class="listen-to-me">3</li> <li id="test-4" class="listen-to-me">4</li> <li id="test-5" class="listen-to-me">5</li> </ul>

如何在li中動態獲取動態創建的ID

問題描述

2 個解決方案

解決方案1
2 已采納 2017-08-21 19:02:12

例

解決方案2
0 2017-08-21 18:49:15

如何在li中動態獲取動態創建的ID

問題描述

2 個解決方案

解決方案1 2 已采納 2017-08-21 19:02:12

例

解決方案2 0 2017-08-21 18:49:15

解決方案1
2 已采納 2017-08-21 19:02:12

解決方案2
0 2017-08-21 18:49:15