JQuery - can i move array elements with jquery? and store them in an other array?

Question

Is it possible to move an array element with jquery? so if i click on it, it would append in the array aswell and not just visually on the dom?

var cardsInHand = ["1", "2", "3", "4", "5", "6", "7"];
var cardsOnField = [];

const cardsInHandEl = document.querySelector("#cardsInHand-el");

for (var i = 0; i < cardsInHand.length; i++) {
    cardsInHandEl.innerHTML +=
        `
    <button>
        ${cardsInHand[i]} 
    </button>
    `
}

$(document).on("click", "#cardsInHand-el button", function () {
    $("#onField-el button")
        .remove()
    $(this)
        .appendTo($("#onField-el"));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <ul id="cardsInHand-el">Cards in Hand: </ul>
    <ul id="onField-el"></ul>
    <script src="script.js"></script>
</body>

jQuery was built as a UI add-on. What you are trying to do is outside that scope — ControlAltDel
– ControlAltDel, Commented Aug 3, 2021 at 15:37
You can move dom elements in the dom, and you can move array items in an array. you cannot move dom elements in the dom by moving items in an array. — user400654
– user400654, Commented Aug 3, 2021 at 15:38
Short answer - no. There is no 'back and forth' between elements within the DOM and the contents of JS arrays. If you wanted to implement something like this, you should use a UI framework such as VueJS vuejs.org — Polymer
– Polymer, Commented Aug 3, 2021 at 15:41

Spectric · Accepted Answer · 2021-08-03 15:44:24Z

You can use Array#push to push the item to the array and Array#splice to remove in the click event listener.

var cardsInHand = ["1", "2", "3", "4", "5", "6", "7"];
var cardsOnField = [];

const cardsInHandEl = document.querySelector("#cardsInHand-el");

for (var i = 0; i < cardsInHand.length; i++) {
  cardsInHandEl.innerHTML +=
    `
    <button>
        ${cardsInHand[i]} 
    </button>
    `
}

$(document).on("click", "#cardsInHand-el button", function() {
  $("#onField-el button")
    .remove()
  $(this)
    .appendTo($("#onField-el"));
  const number = $(this).text().trim();
  cardsOnField.push(number);
  cardsInHand.splice(cardsInHand.indexOf(number), 1);
  /* debugging purposes only */
  console.clear();
  console.log('Cards in hand: ' + cardsInHand);
  console.log('Cards on field: ' + cardsOnField);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <ul id="cardsInHand-el">Cards in Hand: </ul>
  <ul id="onField-el"></ul>
  <script src="script.js"></script>
</body>

shaedrich · Accepted Answer · 2021-08-03 15:53:19Z

1

That's more or less how UI libraries would do it:

var cardsInHand = ["1", "2", "3", "4", "5", "6", "7"];
var cardsOnField = [];

const cardsInHandEl = document.querySelector("#cardsInHand-el");
const cardsOnFieldEl = document.querySelector("#onField-el");

function render(arr, el) {
    el.innerHTML = '';
    for (var i = 0; i < arr.length; i++) {
        el.innerHTML +=
            `
            <button>
                ${arr[i]} 
            </button>
            `
    }
}
render(cardsInHand, cardsInHandEl);
render(cardsOnField, cardsOnFieldEl);

$(document).on("click", "#cardsInHand-el button", function () {
    const number = $(this).text().trim();
    cardsOnField.push(number);
    cardsInHand.splice(cardsInHand.indexOf(number), 1);
    render(cardsInHand, cardsInHandEl);
    render(cardsOnField, cardsOnFieldEl);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <ul id="cardsInHand-el">Cards in Hand: </ul>
    <ul id="onField-el"></ul>
    <script src="script.js"></script>
</body>

answered Aug 3, 2021 at 15:53

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

2 Comments

Mosoli Over a year ago

what would be the benefit of an UI librarie? o:

shaedrich Over a year ago

That you don't have to implement the code yourself. The way I did that is considered cleaner nowadays on one hand but on the other hand it has some overhead by re-rendering the whole list (which isn't a problem if the list is as small as yours)

Collectives™ on Stack Overflow

JQuery - can i move array elements with jquery? and store them in an other array?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related