Get code from a li

Question

I need to get the <li> complete at all checkbox marked.

My code that is mounted dynamically is below:

HTMLNovo = '
    <li class="item item-checkbox widget uib_w_69" data-uib="ionic/checkbox" data-ver="0">
        <label class="checkbox">
            <input class="check ckeckVisitantes" type="checkbox" name="'+pessoa.COD_IDENT_PESSO+'">
            <input id="codigoPessoaPresente" value="'+pessoa.COD_IDENT_PESSO+'" type="hidden">
        </label>'+ pessoa.TXT_NOMEX_PESSO +'
    </li>';

I need to get all this read, the ones that are marked on the page.

Today I’m getting only the Ids.

var inputElements = document.getElementsByClassName('ckeckVisitantes');
for(var i = 0; inputElements[i]; ++i){
    if(inputElements[i].checked)
        arr.push(inputElements[i].name);
}

Answer 1

You just need to replace the following line of code:

arr.push(inputElements[i].name);

for this:

arr.push(inputElements[i].parentNode.parentNode);

But I let myself make a suggestion, instead of checking all the checkboxes to then check which ones are marked, you can do this right on the selector, then the following code snippet

var inputElements = document.getElementsByClassName('ckeckVisitantes');
for(var i=0; inputElements[i]; ++i){
  if(inputElements[i].checked)
    arr.push(inputElements[i].parentNode.parentNode);
}

may be simplified to the following:

var inputElements = document.querySelectorAll('.ckeckVisitantes:checked');
for(var i=0; inputElements[i]; ++i) {
  arr.push(inputElements[i].parentNode.parentNode);
}

finally, instead of assembling your lines using strings, you can use an HTML5 feature... Templates:

In HTML you would have something like:

<template id="tmplLinha">
  <li class="item item-checkbox widget uib_w_69" data-uib="ionic/checkbox" data-ver="0">
    <label class="checkbox labelVisitantes">
      <input type="checkbox" class="check ckeckVisitantes" />
      <input type="hidden" class="hiddenVisitantes" />
    </label>
  </li>
</template>

And in Jakarta it would have something like:

pessoas.forEach(function (pessoa, indice) {
  var linha = document.importNode(tmplLinha, true);
  var label = linha.querySelector(".labelVisitantes");
  var check = linha.querySelector(".ckeckVisitantes");
  var hidden = linha.querySelector(".hiddenVisitantes");  
  var texto = document.createTextNode(pessoa.TXT_NOMEX_PESSO);

  label.appendChild(texto);  
  check.name = pessoa.COD_IDENT_PESSO;
  hidden.value = pessoa.COD_IDENT_PESSO;  
  container.appendChild(linha);
});

may seem complicated and the code gets bigger, but in this case you stop manipulating strings and start manipulating elements, and this greatly improves the performance of the code.

Follow the full example:

var tmplLinha = document.getElementById("tmplLinha").content;
var container = document.getElementById("container");
var getSelecionados = document.getElementById("getSelecionados");

var pessoas = [];
for (var indice = 1; indice <= 10; indice++) {
  var pessoa = {};
  pessoa.COD_IDENT_PESSO = indice;
  pessoa.TXT_NOMEX_PESSO = "Pessoa " + indice;
  pessoas.push(pessoa);
}

pessoas.forEach(function (pessoa, indice) {
  var linha = document.importNode(tmplLinha, true);
  var label = linha.querySelector(".labelVisitantes");
  var check = linha.querySelector(".ckeckVisitantes");
  var hidden = linha.querySelector(".hiddenVisitantes");  
  var texto = document.createTextNode(pessoa.TXT_NOMEX_PESSO);
  
  label.appendChild(texto);  
  check.name = pessoa.COD_IDENT_PESSO;
  hidden.value = pessoa.COD_IDENT_PESSO;  
  container.appendChild(linha);
});


var onGetSelecionadosClick = function (event) {
  //listando checkbox selecionados;
  var selecionados = container.querySelectorAll(".ckeckVisitantes:checked");
  
  //listando linhas à que os checkboxes selecionados pertecem.
  var linhas = [].map.call(selecionados, function (selecionado, indice) {
    return selecionado.parentNode.parentNode;
  });
  
  //remotando o modelo (Pessoa) para os checkbox selecionados.
  var pessoas = [].map.call(linhas, function (linha, indice) {
    var label = linha.querySelector(".labelVisitantes");
    var hidden = linha.querySelector(".hiddenVisitantes");
    return {
      TXT_NOMEX_PESSO: label.textContent.trim(),
      COD_IDENT_PESSO: hidden.value
    };
  });
  console.log(selecionados, linhas, pessoas);
}

getSelecionados.addEventListener("click", onGetSelecionadosClick);

<template id="tmplLinha">
  <li class="item item-checkbox widget uib_w_69" data-uib="ionic/checkbox" data-ver="0">
    <label class="checkbox labelVisitantes">
      <input type="checkbox" class="check ckeckVisitantes" />
      <input type="hidden" class="hiddenVisitantes" />
    </label>
  </li>
</template>

<ul id="container">
</ul>

<button id="getSelecionados" >Obter Pessoas Selecionadas</button>

Answer 2

Explaining the exchange of parents for Parent as quoted by @Tobymosque
Parents: Will bring a list of all previous elements.
Parent: It will bring only one parent element, in our case we are using the selector li which is optional.

$('.ckeckVisitantes').parent('li');

To select the checked checkbox parent li, use the attribute checked

$("input:checkbox[class*=ckeckVisitantes]:checked").parent('li');

Answer 3

If only to catch the li utilize .parentNode to be able to browse your tags.

 var inputElements = document.getElementsByClassName('ckeckVisitantes');
 for (var i = 0; inputElements[i]; ++i) {
   if (inputElements[i].checked) {
     console.log(inputElements[i].parentNode.parentNode);
   }
 }

<li class="item item-checkbox widget uib_w_69" data-uib="ionic/checkbox" data-ver="0">
  <label class="checkbox">
    <input class="check ckeckVisitantes" type="checkbox" name="'+pessoa.COD_IDENT_PESSO+'" checked>
    <input id="codigoPessoaPresente" value="'+pessoa.COD_IDENT_PESSO+'" type="hidden">
  </label>Exemplo</li>

Exit:

 <li class="item item-checkbox widget uib_w_69" data-ver="0" data-uib="ionic/checkbox">