Pick Selected Element from UL

Asked

Viewed 1,081 times

1

I need to get the Element Name only from the Element I clicked on, but when I look for the textContent all of the li 

<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 the "Program.Cs" when I click on it, in all cases.

javascript html html5

  • Are you using any javascript framework? or just pure javascript?

  • Javascript Puro

  • In this case the only way that comes to mind (not pretty), is to create a function that gets the element clicked and in onclick call the function using this: <li onclick="clicked(this)" ...

  • Update the answer with your javascript that will be easier to help you, André

  • I haven’t made the Javacript yet, but this code I sent, will be generated via a DLL, so I can’t tag the onclick

2 answers

1

You can adapt this code to your need.

//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>

1


The code below is capturing all clicks performed on the document, checking if the element clicked is a LI and displaying the textContent of your 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>

  • 1

    Thank you very much, in a simple and practical way solved my problem!

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.