Question

当前HTML代码段：

<ul class="ShippingProviderList">
  <li>
    <label id="shippingMethod_500dae76abe48_0">
      <input id="shippingCheck_500dae76abe48" type="radio" value="0" name="selectedShippingMethod[500dae76abe48]" />
      <span class="ShipperName">My Own Shipping Account (Please make sure that account number is specified within your account page or item will not ship!)</span>
      <em class="ShipperPrice ProductPrice">$0.00</em>
    </label>
  </li>
  <li> 2nd option may or may not be here </li>
</ul>

当前的Javascript代码段：

<script>
var radio = document.getElementById('shippingCheck_500d6aa9a300e'),
var input1 = document.getElementById('FormField_25'),
input2 = document.getElementById('FormField_26'),
btn = document.getElementById('ML20').getElementsByTagName('input')[0];

btn.onclick = function(e) {
if( radio.checked && input1.value.length >= 20 && input2.value.length >= 20 ) {
    alert('Please provide a Shipping Account Number in either the Billing or Shipping sections in order to use your own Shipping Account.');
    e.preventDefault(); // we all stop the submit from happening.
    e.stopPropagation();
    return false;
}
// otherwise do something or nothing and let the submit happen.
};
</script>

问题是500d送货检查是随机生成的，我无法控制。可以通过使用span类＆＃34; ShipperName＆＃34;来调整Javascript来提取正确的数据。在其中有“My Own Shipping”一词，然后在此之前拉出输入字段？还是有更好的方法来做到这一点，我失踪了？我无法以任何方式分配ID，类或更改在那里生成的实际html。

Answer 1

如果jQuery可以接受，你可以使用：

$("input[id^='shippingCheck']")

使用普通的Javascript，您可以使用此功能：

function wildcard(startingId){
  // get all inputs
  var inputs = document.getElementsByTagName("input");
  // iterate over them
  for ( var i = 0; i < inputs.length; i++ ) {

    if ( inputs[i].nodeType === 1 ) {
      // id start with 'shippingCheck' ?
      if (inputs[i].id.indexOf(startingId) == 0)
      {
         return inputs[i];
      }
    }
  }
}

并称之为：

wildcard("shippingCheck")

<小时/> 你可以试试这个：

function fetchInput() {
    var input;
    $(".ShipperName").each(function() {
        if ($(this).text().indexOf("My Own Shipping Account") != -1)
        {
            input = $(this).prev().get(0);
            return;
        }
    });
    return input;
}

并称之为：

fetchInput();

该函数返回DOM元素，因此您可以访问id属性，例如，如下所示：

var inputId = fetchInput().id;

<小时/> 你基本上只希望你的radio变量是对DOM元素的引用，对吧？所以你会用这个：

var radio = fetchInput();

Answer 2

您可以使用jQuery尝试：

var radio = $('[id^="shippingCheck"]');

这将找到一个id以字符串＆＃34; shippingCheck＆＃34;开头的元素。

Answer 3

var spans = document.getElementsByTagName("span"), span, i, len, node;

for (i = 0, len = spans.length; i < len; i++) {
    span = spans[i];
    if (span.innerHTML.match(/My Own Shipping/)) {
        node = span;
        while (node && node.nodeName !== "INPUT") {
            node = node.previousSibling;
        }
        console.log(node);  // This is the input element before that SPAN.
        break;        
    }
}

DOM遍历库可以使这更简单。例如，使用jQuery：

console.log($("span:contains(My Own Shipping)").prev("input")[0]);

Answer 4

请改为尝试：

var radio = $('.ShipperName:contains("My Own Shipping")').siblings(':radio');

它会在.ShipperName旁边找到一个包含“我自己的运费”的单选按钮。

Answer 5

如果您想通过纯javascript获取前一个元素，可以使用previousSibling属性进行一些检查，如下面的函数所示。参数n是您的案例中的span元素。

function getPreviousSibling(n) {
    var x = n.previousSibling;
    while (x.nodeType != 1) { // check if it's an element node
        x = x.previousSibling;
    }
    return x;
}

但是，如果您获得带有“ShipperName”类的span的前一个输入元素，您将获得多个无线电输入（因为您可能在列表中有多个项目）。你仍然需要做额外的东西，得到你想要的东西，但至少你可以使用无线电输入的ID，并用它做一些事情。

请参阅the example here。

如果使用jQuery，选择元素会更容易。

更改现有代码以根据邻近度进行选择

5 个答案: