如何在div包装器中获得div的ID。Jquery

Question

我有一个像这样的div：

<div id="data" class="grid grid-cols-2">
</div>

我有一个函数可以附加到data div中：

function loadStaticBar(data) {
     let pl_name= `bar-${data.title.replace(/\s+/g, '-').toLowerCase()}`
        $('#data').append(`
        <div class="flex flex-col" id="${pl_name}-wrapper">
            <div class="static barchart" id="${pl_name}-plot">

            </div>
        </div>
        `)
}

loadStaticBar(数据)的内容是一个关键和值，它是图表的详细信息：

{id: 453, title: 'Bar Chart Example', select: 'bar-form', xtitle: 'Values', ytitle: 'Date', …}

现在，我正在尝试获取类static的所有ID。我试过：

$('#data').find('.static')

我知道S.fn.init [prevObject: S.fn.init(1)]里面有很多信息。如何获得包含这样的static类的div的I。

ids = [line-plot, bar-plot]

Answer 1

对最新问题的答复可以是：

​

function loadStaticBar(data) {
 let pl_name= `bar-${data.title.replace(/\s+/g, '-').toLowerCase()}`
    $('#data').append(`
    <div class="flex flex-col" id="${pl_name}-wrapper">
        <div class="static barchart" id="${pl_name}-plot">

        </div>
    </div>
    `)
}
const data={id: 453, title: 'Bar Chart Example', select: 'bar-form', xtitle: 'Values', ytitle: 'Date'};

$(function(){
 loadStaticBar(data); // create the divs first !!!
 const ids=$("#data .static").get().map(el=>el.id);
 console.log(ids);
});

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<div id="data" class="grid grid-cols-2">
</div>

​

由于您希望接收一个“适当的”数组而不是jQuery对象，所以首先对所选的DOM元素进行.get()，然后使用标准的Array-method对它们进行.map()是有意义的。

顺便说一句，您也可以在不使用jQuery的情况下解决最初发布的问题：

​

document.addEventListener("DOMContentLoaded", function () {
 const ids=[...document.querySelectorAll("#data .static")].map(el=>el.id);
 console.log(ids);
});

<div id="data" class="grid grid-cols-2">
 <div class="flex flex-col" id="line-wrapper">
  <div class="static linechart" id="line-plot">
  </div>
 </div>
 <div class="flex flex-col" id="bar-wrapper">
  <div class="static barchart" id="bar-plot">
  </div>
 </div>
</div>

​