如何獲得我們點擊哪個元素的索引

Question

我有一個容器列表，我想添加一個按鈕，在容器上顯示終端，點擊終端標識。

但我不知道如何捕捉列表中容器的索引。

我的HTML是：

<li class="liContainer"> 
    <div> 
     <h3>{{nameContainer}}</h3> 
    </div> 
    <div id="idContainer"> 
     <span>ID: {{idContainer}}</span> 
    </div> 
    <div id="stateContainer"> 
     <span class="state">State: {{stateContainer}}</span> 
    </div> 

    <div id="terminalContainer" class="hidden"> 
     <div class="terminal hidden"></div> 
    </div> 

     <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button> 
     <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button> 
     <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button> 
     <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button> 
     <button type="button" class="cmdLogs"> terminal </button> 
</li> 

而我的JS：

'click .cmdLogs'(event) { 
    Session.set("displayCmdLogs",true); 
    //here I need to do something to get the ID with the event and then I could do... 
    setTimeout(function(){ 
     var term = new Terminal(); 
     console.log("term: " + term); 
     //.. the getElement on the right one 
     term.open(document.getElementsByClassName('terminal')[idFromEvent]); 
     //term.fit(); 
     term.write('Hello from container.js'); 
    },200); 
    } 

Answer 1

我假設你想趕上id爲 「idContainer」。我會修改你的HTML如下：

<li class="liContainer"> 
    <div> 
     <h3>{{nameContainer}}</h3> 
    </div> 
    <div id="idContainer"> 
     <span>ID: {{idContainer}}</span> 
    </div> 
    <div id="stateContainer"> 
     <span class="state">State: {{stateContainer}}</span> 
    </div> 

    <div id="terminalContainer" class="hidden"> 
     <div class="terminal hidden"></div> 
    </div> 

     <button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button> 
     <button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button> 
     <button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button> 
     <button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button> 
     <button type="button" class="cmdLogs" id="{{idContainer}}"> terminal </button> 
</li> 

你JS：

'click .cmdLogs'(event, template) { 
    Session.set("displayCmdLogs",true); 
    var id = event.currentTarget.id; //The id is here 

    setTimeout(function(){ 
     var term = new Terminal(); 
     console.log("term: " + term); 
     //.. the getElement on the right one 
     term.open(document.getElementsByClassName('terminal')[idFromEvent]); 
     //term.fit(); 
     term.write('Hello from container.js'); 
    },200); 
    }