Pick Selected UL Element

Question

Pick Selected UL Element

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I need to get the Name only of the Element that I clicked on, but when I search for textContent all the li appears

<li class="folder folder-open Selected">
TesteNfseSPO
<ul>
    <li class="file">TesteNfseSPO.sln</li>
    <li class="folder">TesteNfseSPO
        <ul>
            <li class="file">TesteNfseSPO.csproj</li>
            <li class="file">Program.cs</li>
            <li class="file">app.config</li>
            <li class="folder">Properties
                <ul>
                    <li class="file">AssemblyInfo.cs</li>
                </ul>
            </li>
            <li class="folder">bin
                <ul>
                    <li class="folder">Debug
                        <ul>
                            <li class="file">NfseSPO.dll</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="folder">obj
                <ul>
                    <li class="folder">Debug</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I would like for example when I click to get only "Program.cs" when I click on it, in all cases.

javascript html html5

asked by anonymous 13.12.2016 / 13:24

2 answers

1

You can adapt this code to your needs.

//Aqui pegamos todos os elementos que possui a classe '.file'
var items = document.querySelectorAll('.file');

//Depois no loop adicionamos o evento para cada elemento
for(var i = 0; i < items.length; i++)
  items[i].addEventListener('click', function(e) {    
    document.getElementById("ItemSelected").innerHTML = this.textContent;
    e.stopPropagation();
  });

<li class="folder folder-open Selected">
TesteNfseSPO
<ul>
    <li class="file">TesteNfseSPO.sln</li>
    <li class="folder">TesteNfseSPO
        <ul>
            <li class="file">TesteNfseSPO.csproj</li>
            <li class="file">Program.cs</li>
            <li class="file">app.config</li>
            <li class="folder">Properties
                <ul>
                    <li class="file">AssemblyInfo.cs</li>
                </ul>
            </li>
            <li class="folder">bin
                <ul>
                    <li class="folder">Debug
                        <ul>
                            <li class="file">NfseSPO.dll</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="folder">obj
                <ul>
                    <li class="folder">Debug</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<div id="ItemSelected"></div>

13.12.2016 / 14:01

Increase menu width jquery css Language golang

score 1 · Accepted Answer

The code below is capturing all clicks in the document, verifying that the clicked element is a LI and displaying the textContent of its first child element.

document.addEventListener('click', function(e) {
  if (e.target.tagName === "LI") {
    alert(e.target.firstChild.textContent);
  }
});

<li class="folder folder-open Selected">
  TesteNfseSPO
  <ul>
    <li class="file">TesteNfseSPO.sln</li>
    <li class="folder" id="teste">TesteNfseSPO
      <ul>
        <li class="file">TesteNfseSPO.csproj</li>
        <li class="file">Program.cs</li>
        <li class="file">app.config</li>
        <li class="folder">Properties
          <ul>
            <li class="file">AssemblyInfo.cs</li>
          </ul>
        </li>
        <li class="folder">bin
          <ul>
            <li class="folder">Debug
              <ul>
                <li class="file">NfseSPO.dll</li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="folder">obj
          <ul>
            <li class="folder">Debug</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>