Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Weird add() behavior modifies the selection when changing child attributes #834

Closed
cin210 opened this issue Mar 23, 2016 · 0 comments · Fixed by #1656
Closed

Weird add() behavior modifies the selection when changing child attributes #834

cin210 opened this issue Mar 23, 2016 · 0 comments · Fixed by #1656
Labels

Comments

@cin210
Copy link

cin210 commented Mar 23, 2016

Hello,

We've been using the cheeriojs library with great success but have run into a strange behavior represented by this test case:

    it ('modifying nested selections should not impact the parent', function() {
      var apple = $('.apple'),
          pear = $('.pear');

      var apple_pear = apple.add(pear);

      // applies red to apple and pear
      apple_pear.addClass('red');

      expect(apple.hasClass('red')).to.be.ok(); // this is true
      expect(pear.hasClass('red')).to.be.ok(); // this is true

      // applies green to pear... AND apple
      pear.addClass('green');
      expect(pear.hasClass('green')).to.be.ok(); //currently this is true
      expect(apple.hasClass('green')).to.be.ok(); // and this is true!
    });

=> <ul id="fruits">
   <li class="apple red green">Apple</li>
   <li class="orange">Orange</li>
   <li class="pear red green">Pear</li>
</ul>

Inside exports.add(), modifying the code to create a clone of the "other" selection seemed to work (any further modifications to pear applied to pear as intended), but this seemed to break the uniqSort functionality, so the result was not sorted as expected and adding a class to the new selection still only modified the first object in the selection. Besides breaking many things since other is not always clone-able)

Passing a clone'd pear to the add method fixes this odd behavior (child elements can then be modified without modifying the parent), but no changes to the apple_pear selection are applied to the pear elements:

apple.add(pear.clone()).addClass('red');     
$.html()
=>
<ul id="fruits"><li class="apple red">Apple</li><li class="orange">Orange</li><li class="pear">Pear</li></ul>

pear.addClass('green');
$.html()
=>
<ul id="fruits"><li class="apple red">Apple</li><li class="orange">Orange</li><li class="pear green">Pear</li></ul>

Curious if anyone has run into this before.

In nontrivial examples, this has a large impact on the way we modify nested table and list elements.

Reproduced on Node 0.12.7 and on 4.4.0

@fb55 fb55 added the ❌ Bug label Dec 22, 2020
5saviahv added a commit to 5saviahv/cheerio that referenced this issue Jan 6, 2021
@5saviahv 5saviahv mentioned this issue Jan 6, 2021
5saviahv added a commit to 5saviahv/cheerio that referenced this issue Jan 9, 2021
@fb55 fb55 closed this as completed in #1656 Jan 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging a pull request may close this issue.

2 participants