javascript - 如何遍历 HTML 节点以查找匹配项并从节点获取下一个 innerHTML

Question

我有一个表单元素 <select>选择一个人。一旦元素发生变化 函数getPerson()被执行并读出所选条目的值。

<select id="cust_id" name="f_cust_id" onchange="getPerson(this)">
  <option value="51">Brad Pitt</option>
  <option value="123">Angelina Jolie</option>
  <option value="13">Jennifer Aniston</option>
</select>

下一步是:我在同一页面中有一个隐藏文本，我想在其中找到这个值(示例值 51)。 我需要遍历这个 hiddenCustomer 节点。

隐藏的 HTML 文本

<div id="hiddenCustomer" style="display:none;">
  <span>51</span><span>Brad;Pitt;Y1;Group1;bpitt@wwz.com;12345</span>
  <span>123</span><span>Angelina;Jolie;Y2;Group2;ajolie@wwz.com;12346</span>
  <span>13</span><span>Jennifer;Aniston;Y1;Group1;ja@wwz.com;12347</span>
</div>

最后，如果我有一个匹配项 51=51，我会从下一个元素中取出字符串并将其“拆分”到一个数组中。它将用于填写一些公式字段，例如:名字、姓氏、楼层、群组、电子邮件...

我的问题是:如何最好地通过 hiddenCustomer 节点进行迭代。找到匹配项并从中获取 innerHTML 值 下一个元素(例如:Brad;Pitt;Y1;Group1;bpitt@wwz.com;12345)

ps: 我不想使用 JSON 对象。

Answer 1

你可以这样做

[演示] --> http://fiddle.jshell.net/ykF6P/

function getPerson(element)
{
    var val = element.value;
    var $span = $('#hiddenCustomer span').filter(function(){
      return $(this).text() == val;
   }).next('span');
}