jQuery选择所有未指定父类的给定ID答案

【问题标题】：jQuery select all given id whose parent is not specified classjQuery选择所有未指定父类的给定ID
【发布时间】：2021-08-12 04:19:50
【问题描述】：

我无法使用 jQuery 解决问题。这是问题定义。

我有一份文件如下。

<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>

当“按钮”被点击时（按钮可以被点击多次），我必须找到所有 id = A2 的 DIV。找到后，我必须检查下一个 div 是否有 class= "newClass"。如果没有，则使用此 class= "newClass" 添加/创建 div 并在其中添加 "someData"。否则，如果找到该类，则在其中添加/附加“someData”。

但是整个过程唯一的条件是A2不能有父级 class= "classAdded"

这是我的方法

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

发生的情况是，它总是在 id = "A2" 旁边创建类，其父类为 class="classAdded"，如下所示 - 这是不想要的，因为父类不能是 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>

即使我们考虑这种情况

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

然后应该在其中添加一些数据。但相反，它在父级 class="classAdded"

中创建了一个新 DIV

【问题讨论】：

您是否能够修改标记，或者您是否遇到了一些问题？
当按钮被点击时，标记正在被修改——当我在浏览器中检查源代码时，我可以看到。但没有做我想做的事。
对不起，我的意思是你能编辑你的 HTML 还是它是由某些 CMS 或其他东西生成的？
是的，我可以编辑。如果你想添加一些类等，你可以这样做。但我试图让代码尽可能小而干净。
我刚刚看到，您的id="A2" 有两次。 jQuery（和后面的 JS）会对此感到非常困惑（不要在同一个 HTML 文档上两次使用相同的 ID）。有没有可能，你可以重写你的代码而不用两次相同的id？尝试改用 CSS 类，例如 class="initial append-content-container"。

标签： jquery filter conditional-statements parent

【解决方案1】：

看看这里。这对你有用吗？

<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>

和 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");
}

请忘记在同一个文档中有两次相同的 ID。见这里：Can multiple different HTML elements have the same ID if they're different elements?

【讨论】：

正如我在问题定义中提到的......“我必须找到所有 id = A2 的 DIV”。此 id=A2 正在这些指定位置动态添加。同样，通过单击其他按钮，我必须删除这些项目。这些事情不能只用类来完成，因为我们使用类来渲染样式。或者，我可以使用 Arrays，但我必须再次获取 Array 元素并定位那些要删除的 Id。是的，你是对的，应该避免使用多个具有相同名称的 id。
@Jay：我更新了我的答案。我现在正在寻找 CSS 类 append-content-container 并在那里添加数据。我希望这会有所帮助。