Is not Function JQUERY

Question

$(".add").click(function(event){
  save($(this).parent().attr("id"));
});
function save(docName){
  var inputs = $('#' + docName + ' input');
  var selects = $('#' + docName + ' select');
  var obj;
  console.log(inputs);
  for (let i = 0; i < inputs.length; i++) {
    console.log(inputs[i]);
    obj[inputs[i].attr("id")] = inputs[i].val();
    inputs[i].val() = "";
  }
  for (let i = 0; i < selects.length; i++) {
    obj[selects[i].attr("id")] = inputs[i].val();
    selects[i].val() = "";
  }
  firebase.database().ref().child(docName).push(obj);
}

I’m trying to create a function to add a dynamic form, but attr("id") keeps giving an error. "inputs[i]. attr is not Function". Someone could help me solve this problem?

Answer 1

var divs = $(".div");
for (var i = 0; i < divs.length; i++) {
  console.log(divs[i]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="div" >1</div>
<div id="div2" class="div" >1</div>
<div id="div3" class="div" >1</div>
<div id="div4" class="div" >1</div>

When you do this, you’re not going through a collection of objects jQUery, but rather the collection of DOM that the object jQuery is encapsulated.

What you can do is check the id directly (without using jQuery)

var divs = $(".div");
for (var i = 0; i < divs.length; i++) {
  console.log(divs[i].id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="div" >1</div>
<div id="div2" class="div" >1</div>
<div id="div3" class="div" >1</div>
<div id="div4" class="div" >1</div>

of course, if you need to manipulate each object DOM as an object jQuery, you will need to encapsulate them using the $, although it is possible to make a $(divs[i]), it is better to make use of the $.each.

var divs = $(".div");
divs.each(function (indice, elem) {
  var that = $(this);
  console.log(that.attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="div" >1</div>
<div id="div2" class="div" >1</div>
<div id="div3" class="div" >1</div>
<div id="div4" class="div" >1</div>

in the above example, the this is just the object DOM which is encapsulated by jQuery.

SUGGESTION

$(".add").click(function(event){
  // passe o doc como argumento, utilize ele como escopo para a sua função.
  save($(this).parent());
});
function save(doc){
  // listando todos os inputs e selects dentro do doc.
  var inputs = $('input, select', doc);
  // você não estava iniciando a variavel obj.
  var obj = {};
  inputs.each(function () {
    // encapsulando o objeto DOM no jQuery.
    var input = $(this);
    obj[input.attr("id")] = input.val();
  });
  // val não é uma propriedade, mas sim uma função.
  inputs.val("");  
  // Quanto ao Firebase, não tenho como lhe ajudar.
  firebase.database().ref().child(doc.attr("id")).push(obj);
}