Question

请注意：我正在寻找一个仅限Javascript的解决方案，jQuery无法提供帮助，因为我无法在我正在使用的给定应用程序中使用它。

我的DOM中有以下HTML：

<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
    <div class="mktoOffset" style="width: 10px;"></div>
    <div class="mktoFieldWrap">
        <label for="Agency__c" class="mktoLabel mktoHasWidth" style="width: 100px;">
            <div class="mktoAsterix">*</div>Agency:</label>
        <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
        <div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;">
            <input name="Agency__c" id="Agency__c" type="checkbox" value="yes" class="mktoField">
            <label for="Agency__c"></label>
        </div>
        <div class="mktoClear"></div>
    </div>
    <div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>

我想使用Javascript定位第一个标签（在此示例中为for="Agency__c"），只要div类mktoCheckboxList存在。

这是我能用Javascript弄清楚的，但我不知所措。我的思维过程是按mktoCheckboxList的元素类型或label的类来定位mktoLabel之前的元素。

var checkboxes = document.getElementsByClassName('mktoCheckboxList');
var count = checkboxes.length;
for (i = 0; i < count; i++) {
    console.log(checkboxes[i].previousElementSibling);
}

这个解决方案需要与实际名称值无关，因为我希望每当出现一个复选框而不知道它的属性是什么时它就会起作用，因此使用了类/元素。

这是我的傻瓜：http://jsfiddle.net/darcyvoutt/1y9s00k7/

Answer 1

所有主流浏览器（document.querySelector）现在都支持

see can i use。

document.querySelector(".mktoCheckboxList label")

将选择它在.mktoFieldDescriptor内找到的第一个标签。

您也可以在元素上执行此操作：

parent.querySelector("label");

如果您需要在检索div之前检查div是否包含特定元素，您可以执行以下操作：

querySelectorAll(".mktoFieldDescriptor").filter(function(container){
   // Remove the containers that do not contain .mktoCheckboxList.
   return !!container.querySelector(".mktoCheckboxList");
}).map(function(container){
   // Get the first label.
   return container.querySelector("label")
}).forEach(function(label){
   // Do your label stuff.
});

Answer 2

一种可能的解决方案是：

var checkboxes = document.getElementsByClassName('mktoCheckboxList');
var count = checkboxes.length;
for (i = 0; i < count; i++) {
    console.log(checkboxes[i].parentNode.querySelector('label'));
}

请注意，只有当同一个div中有一个带有标签的.mktoCheckboxList元素时，此解决方案才有效。

Fiddle

Answer 3

这是一种可行的方法：

使用它的标签绑定每个输入。然后查找您需要使用的输入，并获取标签elem：

Calendar yesterday = Calendar.getInstance();
yesterday.roll(Calendar.DAY_OF_YEAR, false);
System.out.println(yesterday.getTime());

完成后，您可以轻松完成：

// Scan the page for labels:
var labels = document.getElementsByTagName('LABEL');
// Find the corresponding input:
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         // Assign a reference to the label from the actual form element:
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];         
    }
}

使用此方法，您只需使用标记名称// Lookup all inputs: var inputs = document.getElementsByTagName("input"); for (var i = 0, max = inputs.length; i < max; i++){ // Act only on checkboxes: if (inputs[i].type === 'checkbox') console.log(inputs[i]); // Look! It's the label! }并输入input即可找到标记。

Answer 4

您可以使用document.evaluate并通过XPath寻址您想要的标签。未测试的：

//div[contains(@class, 'mktoCheckboxList')]/preceding::label[1]

Javascript - 按元素类型或类名查找以前的DOM元素

4 个答案: