1

I am having trouble solving a probelm with jQuery. Here is the problem definition.

I have a document as below.

<DIV id="A1" class="initial">Bla Bla Bla</DIV>
<DIV id="A1_B1" class="comparing">Foo Foo Foo</DIV>
<DIV class="classAdded">
    <DIV id="A2" class="initial">Bla Bla Bla</DIV>
</DIV>
<DIV id="A2" class="initial">Bar Bar Bar</DIV>
<DIV class="newClass">someData</DIV> ---> This class gets created/ or even if it exits
<DIV id="A2_B1" class="comparing">Button</DIV>
<DIV id="A2_B2" class="comparing">Foo Foo Foo</DIV>

When "Button" is cicked (Button can be clicked multiple times), I have to find all the DIV's with id = A2. When found, I have to check if the immediate next div has a class = "newClass". If not then add/ create the div with this class = "newClass" and add "someData" inside it. Else if the class is found then add/ append "someData" inside it.

But the only condition of this whole process is the A2 cannot have the parent class = "classAdded"

This is my approach

if($('#A2:not(.classAdded)').next().hasClass("newClass"))
            $('#A2').next(".newClass").append(someData);
else
        {
            var abc = "<div class='newClass'>"+someData+"</div>";
            $(abc).insertAfter('#A2');
        }

What happens is, it is always createing the class next to id = "A2" whose parent is class="classAdded" like below - which is not wanted, because parent class cannot be class="classAdded"

<DIV id="A1" class="initial">Bla Bla Bla</DIV>
<DIV id="A1_B1" class="comparing">Foo Foo Foo</DIV>
<DIV class="classAdded">
    <DIV id="A2" class="initial">Bla Bla Bla</DIV>
    <DIV class="newClass">someData</DIV>
</DIV>
<DIV id="A2" class="initial">Bar Bar Bar</DIV>
<DIV class="newClass">someData</DIV> ---> This class gets created/ or even if it exits
<DIV id="A2_B1" class="comparing">Button</DIV>
<DIV id="A2_B2" class="comparing">Foo Foo Foo</DIV>

Even if we consider the sitution that

<DIV class="newClass">someData</DIV> exits

Then someData should be added inside it. But instead it creates a new DIV inside the parent class="classAdded"

Jay
  • 744
  • 4
  • 14
  • 30
  • Are you able to modify the markup or are you caught with something fix? – Kurt Lagerbier May 23 '21 at 16:59
  • Markup is getting modified when the button is clicked - I can see when I inspect the source in browser. But not doing what I want. – Jay May 23 '21 at 17:05
  • Sorry, I mean can you edit your HTML or is it generated by some CMS or something else? – Kurt Lagerbier May 23 '21 at 17:10
  • Yes I can edit. If you want to add some class etc., you can do that. But I am trying to keep the code as small and clean as possible. – Jay May 23 '21 at 17:32
  • 1
    I just saw, that you have your `id="A2"` twice. jQuery (and the JS behind) will be very confused about that (don't use the same ID twice on the same HTML document). Is it possible, that you can re-write your code without having the same `id` twice? Try to use CSS classes instead, like `class="initial append-content-container"`. – Kurt Lagerbier May 23 '21 at 17:58

1 Answers1

0

Have a look here. Does that work for you?

<div id="A1" class="initial">Bla Bla Bla</div>

<div id="A1_B1" class="comparing">Foo Foo Foo</div>

<div class="classAdded">
    <div id="A2" class="initial append-content-container">Bla Bla Bla</div>
</div>

<div id="A3" class="initial append-content-container">Bar Bar Bar</div>
<div class="newClass">someData</div> <!-- This class gets created / even if it exits -->

<div id="A2_B1" class="comparing">Button</div>

<div id="A2_B2" class="comparing">Foo Foo Foo</div>

and the jQuery:

// button pressed...
if ($(".append-content-container").next().hasClass("newClass")) {
    $(".append-content-container").append(someData);
} else {
    var abc = "<div class='newClass'>"+someData+"</div>";
    $(abc).insertAfter(".append-content-container");
}

Please forget about having the same ID twice in the same document. See here: Can multiple different HTML elements have the same ID if they're different elements?

Kurt Lagerbier
  • 170
  • 2
  • 11
  • As I have mentioned in my problem definition…”I have to find all the DIV's with id = A2”. This id=A2 is being added dynamically in those specified location. Again, with some other button click, I have to remove these items. These things can’t be done just with classes, because we are using the classes for rendering styles. Alternatively, I could have used Arrays, but again I have to fetch the Array elements and target those Id’s to be removed. Yes, you are right that multiple id’s with the same name should be avoided. – Jay May 24 '21 at 09:48
  • @Jay: I updated my answer. I'm now looking for the CSS class `append-content-container` and add the data there. I hope this helps. – Kurt Lagerbier May 25 '21 at 17:43