如何在未定义类时从ajax响应中获取锚标记值

时间:2013-12-09 05:22:49

标签: javascript html ajax

if(ajaxRequest.readyState == 4)
{
var response = ajaxRequest.responseText;
response=response.split('^^--^^');
var buname=response[5].split('^^|||^^');
//rest code
}

以下代码是我上面提到的ajax请求的响应。 以下内容存储在变量buname中。**即。 ** buname包含以下内容:

<li rel="Particulier" onclick="javascript:tabledata('','buunits','3','single','','','','','','','');" style="height:16px">
        <a href="#">Particulier</a>
         -------------^
     </li>
<li rel="PLH" onclick="javascript:tabledata('','buunits','1','single','','','','','','','');" style="height:16px">
        <a href="#">PLH</a>
      ---------------^
     </li>

我想做什么:

我想在javascript字符串或数组中获取锚标记的值。

期望输出 :( Particulier,PLH)

到目前为止我尝试了什么:从SO中的一个答案我尝试了以下代码,但这不起作用,因为我没有在我给出的代码中定义任何类。< / p>

var elems = document.querySelectorAll('.email');
for(var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    alert(elem.firstChild.getAttribute('href').substr(7));
}

我需要javascript解决方案,请不要提供jquery解决方案。

提前致谢。

4 个答案:

答案 0 :(得分:1)

希望这能解决你的问题 var elems = document.querySelectorAll('.email').getElementsByTagName("a"); for(var i = 0; i < elems.length; i++) { var elem = elems[i]; alert(elem.getAttribute('href').substr(7));}

答案 1 :(得分:1)

querySelectorAll不适用于未附加到DOM的元素,因此请将其添加到display:none,然后将其删除。

 var html = "yourHTML data recieved",
     div = document.createElement('div');
 div.innerHTML = html;
 div.cssText = "display:none";
 document.body.appendChild(div);
 var elements = div.querySelectorAll('li a'), arr = [];
 for(var i = 0, l = elements.length; i< l; i++){
     var ele = elements[i];
     arr.push(ele.innerText || ele.textContent);
 }
 div.parentNode.removeChild(div);

Demo

答案 2 :(得分:1)

这似乎是这样做的。

<强> HTML

<li rel="Particulier" onclick="javascript:tabledata('','buunits','3','single','','','','','','','');" style="height:16px">
        <a href="#">Particulier</a>
     </li>
<li rel="PLH" onclick="javascript:tabledata('','buunits','1','single','','','','','','','');" style="height:16px">
        <a href="#">PLH</a>
     </li>

<br/>
<button onclick="getAnchorText();">Get Text</button>

<强>的Javascript

function getAnchorText() {
    var elems = document.querySelectorAll('a');
    for(var i = 0; i < elems.length; i++) {
        var elem = elems[i];
        alert(elem.innerHTML);
    }
}

这个小提琴中的演示: http://jsfiddle.net/gtZz5/

注意:这会获取锚文本内容,这是您原始问题所要求的内容(而非rel值)。

答案 3 :(得分:1)

您可以在单个元素上使用querySelectorAll,而不仅仅是文档:

var response = "<li rel=\"Particulier\" onclick=\"javascript:tabledata('','buunits','3','single','','','','','','','');\" style=\"height:16px\">\n        <a href=\"#\">Particulier</a>\n         -------------^\n     </li>\n<li rel=\"PLH\" onclick=\"javascript:tabledata('','buunits','1','single','','','','','','','');\" style=\"height:16px\">\n        <a href=\"#\">PLH</a>\n      </li>";
// skip the above in your normal environment, of course; here for example purposes :)
var ul = document.createElement("ul");
ul.innerHTML = response;
var links = ul.querySelectorAll("a");
// links now contains a list of the anchor tags, i.e. [<a href=​"#">​Particulier​</a>​, <a href=​"#">​PLH​</a>​]
var link_texts = [];
for (var i = 0; i < links.length; i++)
{
    link_texts.push(links[i].innerHTML);
}
// link_texts now contains the text inside the links, i.e. ["Particulier", "PLH"]