Last Child of Element Chain

Asked

Viewed 1,129 times

2

I have a table of records and need to update the last element within a <td>, assuming I have the code below, is there any way to take the last element of the string, the element span with class? Some way more direct than .children.children?

<...>
    <td>
     <span>
       <span>
         <span class="QueroEsteElemento">
</fechaTudo>
javascript

  • Have you seen my answer below ?

  • @Someone saw yes, from what I understood, is exactly what I want, but it turned out that I found a less complex way to get the element I need, I used the id of another element and added a keyword, in my case it became simpler and with less code. But that’s what I had been researching and couldn’t find, thank you.

  • @Bruno, I posted an answer with the solution using jQuery.... I think it’s simpler... unless you don’t want to use jQuery... : D

  • @Marllonnasser, I have nothing against jQuery kkkkkkk, I even use it a lot, but in my problem it could not be applied because of the selection of the element, but it is interesting as well. But I was left a question, in your answer you used ". html()" that searches everywhere on the page, could be changed to some specific element?

  • Why is element selection a problem? Don’t you have a definition of what you’re looking for? It’s not always a span within a td?

  • @Marllonnasser, wow, sorry, I was still with an idea to use the class in the selection. In this case it’s not a problem, it’s always that.

  • So... there. in my opinion is a more "clean solution".

Show 2 more comments

4 answers

2


jQuery can help you with the .last()

alert($("span:last").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span>teste1
        <span>teste2
             <span>teste3</span>
        </span>
      </span>
    </td>
  </tr>
</table>

1

You can use the following code

var list = document.getElementById("list").lastChild.innerHTML;
document.getElementById("demo").innerHTML = list;

And in your HTML

<ul id="list">
    <li>StackOverflow</li>
    <li>mauro</li>
</ul>

<div id="demo"></div>

The return will be Mauro

  • This method will return the last element of the "first layer" of the element, but what I need is in the last, so I would need to use 2~3 times the . lastChild ;

  • So rephrase the question.

1

For now there is no direct native way to get the element inside containers "nested". For now you can have a consumable method:

(I warn you that I will not implement this method within HTMLElement# for two reasons:

  • not all browsers have this interface HTMLElement;
  • can be problematic with libraries

)

Example to work in multiple browsers. Note: you may notice that I used #childNodes instead of #children, some old browsers do not support #children.

var castCollection,
    findLastNestedContainer;

findLastNestedContainer = function(container) {
    var child;
    for (; child = castCollection(container.childNodes)[0];)
        container = child;
    return container;
};

castCollection = function(collection) {
    var revised = [];
    var i, len, node;

    i = 0;
    len = collection.length;

    for (; i < len; ++i) {
        node = collection[i];
        if ((typeof node.nodeValue) !== "string")
            revised.push(node);
    }

    return revised;
};

Now, finally goes the explanation:

  • findLastNestedContainer takes an HTML container and continuously checks the first child element that the current container has, until no more HTML elements appear inside it, finally returns the last verified container.

Example of use:

findLastNestedContainer(elementoHTML)

This function will allow you to directly capture an (first) element within containers nested, not just inside a little elephant.

If you want to take the last element inside (one or several) HTML elements, just modify the condition inside the loop for in the function block findLastNestedContainer, to take the last element of the current container’s children collection:

// Eu sei que poderia ter sido usado Array#last,
// mas nem todos navegadores suportam o getter
for (; (child = castCollection(container.childNodes))[child.length - 1];)
    container = child;

0

you can search the element by class.

var containers = document.querySelectorAll(".container");
[].forEach.call(containers, function (container, indice) {
  var teste = container.querySelector(".teste");
  teste.textContent = "Teste " + indice;
});
<div class="container">
  <div>
    <div>
      <div>
        <div class="teste">

        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div>
    <div>
      <div>
        <div class="teste">

        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div>
    <div>
      <div>
        <div class="teste">

        </div>
      </div>
    </div>
  </div>
</div>

Browser other questions tagged javascript

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