Question

我尝试使用javascript删除每个输入类的父div，并将其替换为我自己的类。但是输入字段的id始终是随机的。这是我的代码：

<script type="text/javascript">

var filter = document.getElementsByName('filter[]');

function show() {
    for (var i = 0; i < filter.length; i++) {
        alert(filter[i].value)
    }
}

//The .sidebar-filter-item, should not be hardcoded 
//because that name can differ always. 
$("<h2> test </h2>").insertBefore(".sidebar-filter-item ");

以下是我的输入字段的外观：

<div class="random1293">
    <input id="filter_16" type="checkbox" name="filter[]" value="16">
</div>

<div class="random2423">
    <input id="filter_17" type="checkbox" name="filter[]" value="17">
</div>

Answer 1

选择后，您可以使用以下选择DOM元素父元素：

element.parentElement

如果id属性是随机/不可预测的，那么选择元素你可以改为使用：

document.getElementsByTagName("input");

这将为您提供所有输入元素的数组，然后您可以循环执行每个输入元素的操作。

或者你可以给你想要选择的每个元素一个类（如果你不想要页面上的所有输入）：

document.getElementsByClassName("className");

它还将返回一个可以以相同方式处理的数组。

Answer 2

即使您没有将此帖子标记为Jquery，但仍然在OP中的代码中使用了jquery，我得出的结论是Jquery解决方案是可以接受的。

选择以id filter_开头的所有输入元素，然后将父div的类更改为您想要的内容。

$('input[id^="filter_"]').each(function(){
  $(this).parent().attr('class','yourOwnClassHere');
});

对于每个元素javascript删除父div并替换为自己的div

2 个答案: