Appending jQuery element multiple times

Question

For the html:

<body>
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
  <p>Para 4</p>
  <p>Para 5</p>
</body>

If we use the following code in a script

$(function() {
  let a = $('<span> span 1 </span>');
  $('p').append(a);

  let temp = $('span');
  for(i = 0; i < temp.length; i++) {
    console.log(temp.eq(i) === a);
  }
});

    $(function() {
      let a = $('<span> span 1 </span>');
      $('p').append(a);
    
      let temp = $('span');
      for(i = 0; i < temp.length; i++) {
        console.log(temp.eq(i) === a);
      }
    });

p { border: 1px solid green; }
span { border: 1px solid blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
      <p>Para 1</p>
      <p>Para 2</p>
      <p>Para 3</p>
      <p>Para 4</p>
      <p>Para 5</p>
    </body>

I expected the result to be true since the same element is append to all the <p> elements. Can someone explain why the result is false ?

fdomn-m · Accepted Answer · 2021-01-20 11:53:43Z

Firstly, it will always be false, because

var a = $("<span>span 1</span>")

creates an in memory jquery object, without a corresponding DOM node.

When you append this with $('p').append(a) you append multiple new copies with the original (in var a) still in memory.

So when you get the new instances with temp = $('span') you're getting them from the DOM.

Note also that === on objects checks if they're the same instance and also note that $(selector) queries are not live queries - they only get what's there at the time. So they'll never be the same object as a.length == 1 and $("span").length == 5

Secondly, you can't compare two jquery objects using === as they're not the same instance of an oject, here's a more succinct version of your test:

console.log($("div") === $("div"))

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

You could update your js to only look at DOM nodes

console.log(temp[i] === a[i]);

which would still be false as a is in memory

$(function() {
  let a = $('<span> span 1 </span>');
  $('p').append(a);

  let temp = $('span');
  for (i = 0; i < temp.length; i++) {
    console.log(temp[i] === a[i]);
  }
});

p { border: 1px solid green; }

span { border: 1px solid blue; }

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

<body>
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
  <p>Para 4</p>
  <p>Para 5</p>
</body>

Converting this the same as previously to look at DOM nodes only (excluding the in-memory issue) you can now see that comparing the nodes does return true.

// derived example
console.log($("div")[0] === $("div")[0])

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

But comparing with an existing item would be false as you've taken 1 item and made it into 5. So ($("span")[0] === $("span")[1]) === false

One file addendum. If you compare the HTML (string) rather than the objects, then yes, they will all be the same

$(function() {
  let a = $('<span> span 1 </span>');
  $('p').append(a);

  let temp = $('span');
  for (i = 0; i < temp.length; i++) {
    console.log(temp.eq(i).html() === a.html());
  }
});

p { border: 1px solid green; }
span { border: 1px solid blue; }

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

<body>
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
  <p>Para 4</p>
  <p>Para 5</p>
</body>

Collectives™ on Stack Overflow

Appending jQuery element multiple times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related