Comment obtenir des valeurs dynamiquement à partir de plusieurs éléments HTML qui se trouvent dans le même div?

Question

J'ai généré du html dynamiquement comme

            SélectionnerTéléphoneWhatappFacebookWebFaxLe type de contact est requis

            La valeur du type de contact est requise

            SélectionnerTéléphoneWhatappFacebookWebFaxLe type de contact est requis

            La valeur du type de contact est requise

en jquery

var numItems = $(".space").length;
$('.space').each(function(i, obj) {
    var $this = $(this);
    $this.find("input[type=text]").each(function() {
        var textBoxValue = $(this).val();
        var selectValues = $(".space select").val();
        console.log(textBoxValue);
    });
});

J'essaie de récupérer les valeurs select dans le même code. Il obtient toujours une valeur dans toutes les itérations. Je veux effectuer une opération sur les deux valeurs, c'est pourquoi j'essaie de modifier le code ci-dessus pour récupérer les deux valeurs dans la même boucle.

S'il vous plaît aidez-moi!!!

Answer 1

Vous pouvez utiliser $this qui fait référence à espace avec find()

var selectValues = $this.find("select").val();

---

Comme vous n'avez qu'un seul élément d'entrée, vous pouvez simplement les cibler en une seule itération

var numItems = $(".space").length;
$('.space').each(function(i, obj) {
    var $this = $(this);
    var selectValues = $this.find("select").val();
    var textBoxValue = $this.find("input[type=text]").val();
    console.log(selectValues, textBoxValue);
});

Vous pouvez utiliser .closest() pour remonter jusqu'au parent espace, puis utiliser .find() pour cibler l'élément var selectValues = $(this).closest(".space").find("select").val();

Answer 2

Une chose que vous pouvez faire lorsque vous générez des éléments dynamiquement est que vous pouvez également générer le javascript dynamiquement.

Cela a aussi quelques inconvénients mais dans de nombreux cas, c'est assez utile.

Exemple en razor:

$this.find("#divtag@{id}").each(function() {});

Answer 3

function fetchData(){
  var numItems = $(".space").length;
  $('.space').each(function(i, obj) {
      var $this = $(this);
      $this.find("input[type=text]").each(function() {
          var textBoxValue = $(this).val();
          var selectValues = $this.find("select").val();
          console.log(textBoxValue);
          console.log(selectValues);
      });
  });
}

fetchData();

            ChoisirTéléphoneWhatappFacebookWebFaxLe type de contact est requis

            La valeur du type de contact est requise

            ChoisirTéléphoneWhatappFacebookWebFaxLe type de contact est requis

            La valeur du type de contact est requise

Answer 4

Une autre façon simple pourrait être d'utiliser la méthode serialize() sur les éléments que vous souhaitez :

var data = $(".space").find("input, select").serialize();
console.log(data)

            SélectionnerTéléphoneWhatappFacebookWebFaxLe type de contact est requis

            La valeur du type de contact est requise

            SélectionnerTéléphoneWhatappFacebookWebFaxLe type de contact est requis

            La valeur du type de contact est requise

Notez que pour utiliser cette méthode, vous devez ajouter l'attribut name au select.