jQuery Replace With only works once for an object reference

Question

I'm having a strange issue with replaceWith (or more likely with object referencing).

I am trying to create a kind of table of rows that either have empty slots or full slots. As a demonstration I made this simple fiddle. http://jsfiddle.net/Ltxtvyn3/3/ In this fiddle 4 empty slots are initialized. Then one is filled. Then the same one should be emptied. But instead it is remaining filled. It is as if I can only use replaceWith once, or I am not understanding something about my object references.

HTML

<div class = "slot empty">Empty</div>
<div class = "slot full">Full</div>

<div class = "wrapper"></div>

CSS

.slot{
    width:50px;
    height:50px;
    display:none;
}
.empty{
    background-color:red;
}
.full{
    background-color:blue;
}

Javascript

var wrapper = $('.wrapper');
var empty = $('.slot.empty');
var full = $('.slot.full');

var slots = {};

for(var i = 0; i < 4; i++){
    slots[i] = empty.clone().show();
    wrapper.append(slots[i]);    
}

function fillSlot(id){
    slots[id].replaceWith(full.clone().show());
}

function emptySlot(id){
    slots[id].replaceWith(empty.clone().show());
}

fillSlot(1);
emptySlot(1);

I am hoping that the object var slots maintains a reference to the divs and I'm not sure if it is doing that or not.

Dave · Accepted Answer · 2015-07-23 15:46:36Z

2

No, it's not keeping a reference, but you can fix this pretty easily.

Here's some running code:

var wrapper = $('.wrapper');
var empty = $('.slot.empty');
var full = $('.slot.full');

for(var i = 0; i < 4; i++){
  wrapper.append(empty.clone().show());    
}

function fillSlot(id){
  $(".wrapper .slot").eq(id).replaceWith(full.clone().show());
}

function emptySlot(id){
  $(".wrapper .slot").eq(id).replaceWith(empty.clone().show());
}

fillSlot(1);

setTimeout(function() {
  emptySlot(1);
}, 2000);

.slot{
    width:50px;
    height:50px;
    display:none;
}
.empty{
    background-color:red;
}
.full{
    background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "slot empty">Empty</div>
<div class = "slot full">Full</div>
<div class = "wrapper"></div>

answered Jul 23, 2015 at 15:46

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BarryBones41 · Accepted Answer · 2015-07-23 16:04:11Z

Thanks for the answers. I know understand why the object doesn't keep a reference, and I really wanted that to be the case. I simply added a wrapper slot and then I will affect the contents of the wrapper. That way I always have a reference to the slot.

HTML

    <div class="slot-content empty">Empty</div>
<div class="slot-content full">Full</div>
<div class = "slot"></div>
<div id="wrapper"></div>

Javascript

var wrapper = $('#wrapper');
var slot = $('.slot');
var empty = $('.slot-content.empty');
var full = $('.slot-content.full');

var slots = {};

for(var i = 0; i < 4; i++){
    slots[i] = slot.clone().show();
    slots[i].html(empty.clone().show());
    wrapper.append(slots[i]);
}

function fillSlot(id){
    slots[id].html(full.clone().show());
    slots[id].find('.slot-content').html('hello');
}

function emptySlot(id){
    slots[id].html(empty.clone().show());
}

fillSlot(1);
emptySlot(1);
fillSlot(2);

Zakaria Acharki · Accepted Answer · 2015-07-23 16:44:05Z

2

UPDATED

Your code work fine just if you change the selection method and you don't want slots list no more.

Replace :

function fillSlot(id){
    slots[id].replaceWith(full.clone().show());
}

function emptySlot(id){
    slots[id].replaceWith(empty.clone().show());
}

BY :

function fillSlot(id){
    wrapper.children().eq(id).replaceWith(full.clone().show());
}

function emptySlot(id){
    wrapper.children().eq(id).replaceWith(empty.clone().show());
}

Selecting directly from wrapper what means selecting from fresh DOM. that will fix the problem, take a look at updated fiddle bellow.

Updated JSFiddle

edited Jul 23, 2015 at 16:44

answered Jul 23, 2015 at 15:52

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

nril · Accepted Answer · 2015-07-23 16:27:11Z

1

The problem is slots[i] isn't pointing to the div - so replaceWith won't pick the right item. Update the loop as follows (adding slots[i] = wrapper.find(':last-child') ):

for(var i = 0; i < 4; i++){
    slots[i] = empty.clone().show();
    wrapper.append(slots[i]);
    slots[i] = wrapper.find(':last-child')
}

Actually this may make the code a little easier to understand (replace loop with this instead)

for(var i = 0; i < 4; i++){
    wrapper.append(empty.clone().show());
    slots[i] = wrapper.find(':last-child')
}

Tested and works on FF..

edited Jul 23, 2015 at 16:27

answered Jul 23, 2015 at 16:17

nril

5682 silver badges7 bronze badges

Comments

colonelsanders · Accepted Answer · 2015-07-23 15:56:30Z

0

It's not keeping a reference to the DOM element. If you still want to use the array, then you can just repopulate the list every time you update one of its elements. Not terribly efficient, but I suppose it saves you from keeping state in the DOM.

function redraw() {
  $('.wrapper').empty();
  for(var i = 0; i < 4; i++){
    wrapper.append(slots[i]);    
  }
}

JSFiddle

answered Jul 23, 2015 at 15:56

colonelsanders

8246 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery Replace With only works once for an object reference

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related