var selectedCountries = {};

var id = 1;
var profile = {};

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  $.extend(profile, profile1);
});

$.extend(selectedCountries, profile);

console.log(selectedCountries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

Ich versuche, Bereiche in einem Div zu durchlaufen und die Werte von Bereichen zu einem Objekt mit einer ID hinzuzufügen. Ich versuche Folgendes, aber es wird nur ein Element hinzugefügt. Wie kann ich jedes Land und jede ID zum Objekt hinzufügen?

meine Geige

2
Kurkula 19 Apr. 2018 im 07:56

5 Antworten

Beste Antwort

Sie sollten array anstelle von object für die Variable selectedCountries verwenden

Führen Sie das folgende Snippet aus

var selectedCountries = [];

var id = 1;

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  selectedCountries.push(profile1)
});

console.log(selectedCountries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>
4
PHP Worm... 19 Apr. 2018 im 05:04

Sie müssen verwenden Ein array von objects dafür. Verwenden Sie einfach diesen Code.

https://jsfiddle.net/xh8L2594/21/

var selectedCountries = []
var id = 1;
$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  selectedCountries.push({
  id:id, // update id accordingly
  country:countryName
  }) 
});

console.log(selectedCountries);
1
PHP Worm... 19 Apr. 2018 im 05:03

Sie können die jQuery-Map -Methode verwenden, um ein array zurückzugeben und das erforderliche Ergebnis zu erhalten Ergebnis mit Kombinationen von ES6 .

Die map () Methode wird erstellt Ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array.

DEMO

const id = 1;

let profile = $.map($(".countriesSelection span"), item => {
  return {id,countryName:$(item).text()};
})

console.log(profile);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>
1
Narendra Jadhav 19 Apr. 2018 im 05:23

Sie müssen es mit array.push () anstelle von $ .extend im Array speichern. Verwenden Sie die Eigenschaft zum Ersetzen des alten Objekts. Deshalb erhalten Sie nur den letzten Wert.

Versuche dies:

 

var id = 1;
var profile = [];

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  profile.push(profile1);
});



console.log(profile);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>
2
R.K.Saini 19 Apr. 2018 im 05:01

Mit $.extend überschreiben Sie alle zuvor zugewiesenen Eigenschaften. Wenn aus der ersten Iteration profile { id: 1, countryName: 'India' } wird, werden diese Eigenschaften durch die zweite Iteration in { id: 2, countryName: 'USA' } überschrieben.

Sie sollten wahrscheinlich ein Array anstelle eines Objekts verwenden und dann auf das Array verschieben - und jQuery vollständig vermeiden, es ist nicht erforderlich.

const selectedCountries = [...document.querySelectorAll('.countriesSelection > span')]
  .map((span, i) => ({ id: i + 1, countryName: span.textContent }));
console.log(selectedCountries);
<div class="countriesSelection">

<span>India</span>
<span>USA</span>
<span>China</span>
<span>Japan</span>

</div>
2
CertainPerformance 19 Apr. 2018 im 05:02