javascript - 如何选择一个一次使用 javascript 或 jQuery

Question

我有以下由传单生成的代码。Leaflet 没有在其 HTML 中使用正确的语法，因此这有点困难。

我希望创建<button>与每个元素相对应的元素，<input>这样我就可以触发它们而不必处理在传单顶部应用样式。

<div class="leaflet-control-layers-base">
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span> All Activities</span>
    </div>
  </label>
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span> 
        <span id="icons1">Beaches</span>
      </span>
    </div>
  </label>
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span>
        <span id="icons2">Wading pools</span>
      </span>
    </div>
  </label>
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span>
        <span id="icons3">Swimming pools</span>
      </span>
    </div>
  </label>
</div>

标签： javascripthtmljqueryleaflet

Answer 1

您可以使用以下命令选择所有这些输入querySelectorAll：

const inputs = document.querySelectorAll("input.leaflet-control-layers-selector");

这给了你一个NodeList，你可以通过forEach（在现代浏览器中）循环或索引到 vialength和[]。

例如，添加一个按钮：

const list = document.querySelectorAll("input.leaflet-control-layers-selector");
for (const input of list) {
    input.insertAdjacentHTML(
        "afterend",
        "<button type=button>Some Button</button>"
    );
}

<div class="leaflet-control-layers-base">
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> All Activities</span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons1">Beaches</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons2">Wading pools</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons3">Swimming pools</span></span></div>
    </label>
</div>

对于稍旧的浏览器，您可能需要使用forEach，甚至在更旧的浏览器上，您可能需要 polyfill forEach。这个答案详细介绍了那部分事情。

或者，如果您想要buttons 末尾的spans：

const list = document.querySelectorAll("input.leaflet-control-layers-selector");
for (const input of list) {
    input.nextElementSibling.insertAdjacentHTML(
        "afterend",
        "<button type=button>Some Button</button>"
    );
}

<div class="leaflet-control-layers-base">
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> All Activities</span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons1">Beaches</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons2">Wading pools</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons3">Swimming pools</span></span></div>
    </label>
</div>

等等。