如何根据一些类和ID将文本写入html标记？

Question

我正在尝试创建一个HTML页面，在其中它应该打印项目名称（在div容器内），点击一个按钮到下面的段落，条件是-它应该只打印那些类名为“active”和父id为“selected”的项目。

我试过这么做，这是我的代码-

null

function myFunction() {
    var selectedEl = document.querySelector(".selected");
    var items = selectedE1.getElementsByClassName('active');
    
    document.getElementById('listItems').innerHTML = items;
}

html lang-html prettyprint-override"><div id="parent">
    <div id="example1 selected">
        <div class="item1"> ex1 item1 </div>
        <div class="item2 active"> ex1 item2 </div>
        <div class="item3"> ex1 item3 </div>
    </div>
    <br>
    <div id="example2">
        <div class="item1"> ex2 item1 </div>
        <div class="item2 active"> ex2 item2 </div>
        <div class="item3 active"> ex2 item3 </div>
    </div>
    <br>
    <div id="example3 selected">
        <div class="item1 active"> ex3 item1 </div>
        <div class="item2"> ex3 item2 </div>
        <div class="item3"> ex3 item3 </div>
    </div>
    <br>
    <div id="example4 selected">
        <div class="item1"> ex4 item1 </div>
        <div class="item2"> ex4 item2 </div>
        <div class="item3"> ex4 item3 </div>
    </div>
</div>

<br> <button onclick="myFunction()">Get Items</button>
<br><br>
<strong>Item List:<br></strong>
<p id="listItems"></p>

null

对于上面的代码，预期的输出应该是-
项目列表:
ex1 item2
ex3 item1

注意：您可以使用JavaScript和JQuery

请帮我做这件事。提前道谢！

Answer 1

您需要基于类进行迭代

例如：

$('.selected .active').each(function(i, obj) {
    console.log($(this).html());
});

Answer 2

id选择器值无效(id的值不能包含空格，并且在整个文档中必须唯一）。使用class属性，您可以尝试以下方法：

null

function myFunction() {
    var items = document.querySelectorAll(".selected  > .active");
    var res="";
    items.forEach(i => res += i.outerHTML);
    document.getElementById('listItems').innerHTML = res;
}

<div id="parent">
    <div class="example1 selected">
        <div class="item1"> ex1 item1 </div>
        <div class="item2 active"> ex1 item2 </div>
        <div class="item3"> ex1 item3 </div>
    </div>
    <br>
    <div class="example2">
        <div class="item1"> ex2 item1 </div>
        <div class="item2 active"> ex2 item2 </div>
        <div class="item3 active"> ex2 item3 </div>
    </div>
    <br>
    <div class="example3 selected">
        <div class="item1 active"> ex3 item1 </div>
        <div class="item2"> ex3 item2 </div>
        <div class="item3"> ex3 item3 </div>
    </div>
    <br>
    <div class="example4 selected">
        <div class="item1"> ex4 item1 </div>
        <div class="item2"> ex4 item2 </div>
        <div class="item3"> ex4 item3 </div>
    </div>
</div>

<br> <button onclick="myFunction()">Get Items</button>
<br><br>
<strong>Item List:<br></strong>
<p id="listItems"></p>