使用 jQuery 在 JSON/Array/Object 中存储来自 select 的选项

Question

正如 GEAfan 所说，删除require()- 静态资产通常从/public/文件夹中提供。所以，我会创建一个文件夹/public/assets/，并将所有文件夹复制./node_modules/cryptocurrency-icons/到/public/assets/images/文件夹。从那时起，您就可以将字符串传递给src属性。还有模板文字语法，例如使用反引号而不是连接字符串，使您的代码更具可读性...<img  alt="icon"  style={{ width: 28, height: 28 }}  src={`/assets/images/32/color/${coin.symbol ? coin.symbol : "generic"}.png`}/>由于coin.symbol始终为真，您将必须动态导入资产以测试它们是否确实存在，以便您能够设置通用图标。var rows = coins.map((coin: any) => {    let hasFile: Boolean;        import(`your/path/to/${coin.symbol}.png`).then(() => hasFile = true).catch(() => hasFile = false)      return {    cells: [      {        key: "icon",        content: (          <span style={{ display: "flex", alignItems: "center" }}>            <div style={{ marginRight: 8 }}>              <img                alt='icon'                style={{ width: "32px", height: "32px" }}                src={`/assets/images/black/${hasFile ? coin.symbol + "@2x" : "generic"}.png`}              />我希望在以下方面得到一些帮助：所以，我的 HTML 结构中有这个（通过 WordPress 生成）<select class="items">    <option value="0" selected="selected">All Types Of Staff</option>    <option class="level-0 main-option-1" value="12">Main Option 1</option>    <option class="level-1 sub-option-1" value="29">Sub Option 1</option>    <option class="level-1 sub-option-2" value="30">Sub Option 2</option></select>理想情况下，使用 jQuery（我知道，但项目已经在使用它了……）……我想做的是所有具有“0 级”类的东西，我想添加到数组/JSON 对象/我可以迭代的东西，下面的所有东西都具有 1 级，添加为那个的子类型...等等，这个想法是我们可以隐藏选择按钮，只有子选项可以作为按钮使用，标签作为标题。我对管理输出非常有信心，我似乎无法弄清楚如何或最好的方式来存储它......有人可以帮我吗？我对 jQuery 一点都不陌生，但对自己创建 JS 对象还是很陌生。

Answer 1

您可以遍历level-0选择中的每个选项，将它们的文本添加为标签，将它们的同级level-1选项文本作为项目添加到对象中。然后你可以将这些对象推送到一个数组来生成你想要的结构：

let options = [];

$('.items option.level-0').each(function(_, el) {

  let label = $(el).text();

  let items = [];

  el = $(el).next();

  while (el.length && el.attr('class').split(/\s+/).includes('level-1')) {

    items.push(el.text());

    el = el.next();

  }

  options.push({

    label,

    items

  });

});

console.log(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="items">

  <option value="0" selected="selected">All Types Of Staff</option>

  <option class="level-0 main-option-1" value="12">Main Option 1</option>

  <option class="level-1 sub-option-1" value="29">Sub Option 1</option>

  <option class="level-1 sub-option-2" value="30">Sub Option 2</option>

  <option class="level-0 main-option-2" value="11" selected="selected">Main Option 2</option>

  <option class="level-1 sub-option-1" value="28">Sub Option 1</option>

  <option class="level-1 sub-option-2" value="25">Sub Option 2</option>

  <option class="level-1 sub-option-3" value="26">Sub Option 3</option>

  <option class="level-1 sub-option-4" value="27">Sub Option 4</option>

  <option class="level-0 main-option-3" value="10">Main Option 3</option>

  <option class="level-1 sub-option-1" value="22">Sub Option 1</option>

  <option class="level-1 sub-option-2" value="23">Sub Option 2</option>

</select>