JavaScript: 当有两个class B 元素时，如何select class A inside class B inside id X？

Question

我需要使用 JavaScript document.querySelector 访问 class。当内部有两个相似的命名 .formBox classes 时，如何在 id (#add-occasion) 内的 class (.formBox) 内访问 class (.btnCancel) #add-occasion id？我有很多具有相同 class 按钮名称和不同模态 ID 的模态。

<div data-role="modal" id="add-occasion">
    <h3>Add new occasion</h3>
    <form>
        <div class="formBox">
            <input type="text" id="new-occ" value="" placeholder="" class="" />
        </div>
        <div class="formBox">
            <input type="button" class="btnCancel" value="CANCEL" />
            <input type="button" class="btnSave" value="SAVE" />
        </div>
    </form>
</div>

Answer 1

你只需要这个：

var elements = document.querySelectorAll("#add-occasion .formBox .btnCancel");
elements[0].style.border = "1px solid red";

由于只有一个元素满足所有这三个条件，因此它只会 return 一个元素。 querySelector() 函数将在两个 .formBox 元素中查找，但不会在第一个元素中找到 .btnCancel 元素，因此它只会移动到下一个 .formBox 元素会找到一个。

事实上，对于您显示的 HTML，您甚至不需要 .formBox 参考并且可以只使用它，因为 .btnCancel 项目之外 .formBox 您要避免的：

var elements = document.querySelectorAll("#add-occasion .btnCancel");
elements[0].style.border = "1px solid red";

或者，如果您确定只有一个元素可能符合您的条件，或者您只想要第一个，那么您可以只使用 document.querySelector():

var item = document.querySelector("#add-occasion .btnCancel");
item.style.border = "1px solid red";

JavaScript: 当有两个class B 元素时，如何select class A inside class B inside id X？

JavaScript: how to select class A inside class B inside id X when there are two class B elements?

javascript

css-selectors