2013-07-01 41 views
1

我有一个HTML文件,我正在用我正在使用jQuery的greasemonkey脚本进行刮擦。如何使用jQuery从SPAN元素中提取名称属性?

HTML页面非常长,但是我在整个页面中都有一些<span>元素。

假设这些元素是这样的:

<span id="spnMX45" name="spnMX45" >16</span> 
<span id="spnMX46" name="spnMX46" >10</span> 
<span id="spnMX47" name="spnMX47" >11</span> 
<span id="spnMX48" name="spnMX48" >5</span> 

有,我从这些元素需要两个值:我需要“spnMX”后到来的数量和范围的文本。

我将用这些值填充数组并将它们发送出去进行处理。我能做的大部分,但抓住nameid属性一直是一个问题。

这就是我目前所面对的:

// Grab Max Points for assessments 
var maxPointsArray = $("span[id^=spnMX]").map(
    function(data){ 
    arr = [this.Attr('name')]; 
    return arr; 
    } 
); 

console.log(maxPointsArray.length); // yields: 9 <--actual number of span elements in test html 
console.log(maxPointsArray); // yields: 9 undefined objects 

我已经试过:

arr = [this.name]; 
arr = this.name; 
arr = [this.attr('name')]; 
arr = this.Attr('name'); 

我似乎无法得到它。跨度属性无法抓取?我怀疑这一点,但我无法弄清楚这一点。我已经成功完成了几个不同的输入类型元素的确切事情。我无法成功抓取这个对象的text(),但我似乎无法获得该名称或id甚至属性。

+0

$(本).attr( '名称'); – Aguardientico

+1

你不能在span元素上有一个name属性,它在HTML中是不允许的。 – Quentin

回答

2

需要注意的是:

  • 的Javascript(和jQuery)区分sensiti五个。 .attr有效; .Attr不是。
  • this里面的一个.map()Doc循环不是一个jQuery对象。因此,为了使用像.attr()这样的jQuery函数,您需要使用$(this).attr()
  • jQuery .map()在映射数组上非常强大,但它返回一个jQuery对象。使用.get()作为最终结果。
  • 由于您的jQuery选择器使用id,并且idname(无效的HTML!),使用id来提取该值。

把它放在一起;使用(See it in action at jsFiddle):

var maxPointsArray = $("span[id^=spnMX]").map (
    function (index) { 
     var text = $.trim (this.textContent); 
     var idVal = this.id.replace (/spnMX/, ""); 

     //-- This will make a two-dimensional array: 
     return [ [idVal, text] ]; 
    } 
).get(); 

console.log (maxPointsArray.length); 
console.log (maxPointsArray); 

对于样品的跨度,这个代码给出了这样的结果在控制台:

4 
[ ["45", "16"], ["46", "10"], ["47", "11"], ["48", "5"] ] 
+0

感谢您的解释。我喜欢这个代码,它与我开始的最接近。我将不得不在第二和第三个要点中搜索更多关于你所说的内容的细节。顺便说一下,这些跨度不是我的代码,所以我只是发布什么从原始网站。其余的代码看起来不太好。 :) 再次感谢。 – pedwards

+0

不客气,乐意效劳。我知道这些跨度不是你的(我经常使用Greasemonkey标签),但是无效的代码经常更改/修复,所以如果你的脚本更多地依赖* valid *部分,你的代码会更长时间地适应页面。 :) –

+0

有关更多详细信息,我用[.map()'参考](http://www.jqapi.com/#p=map)链接更新了答案。 –

1

使用此:“和跨度的文本‘

atr = $(this).attr('name'); 
1

’。有迹象表明,我从这些元素需要两个值,我需要 后自带数字” spnMX

<span>元素不允许name属性btw。

鉴于你的ID是完全一样的,因为每个名字,你可以使用以下命令:

$("span[id^=spnMX]").each(function(){ 
    var text = this.innerHTML; 
    // Returns 16, 10, 11, 5. The text inside each <span>. 
    var idNum = this.id.match(/[\d]+$/)[0]; 
    // Returns 45, 46, 47, 48. The parts of each ID after spnMX. 
}); 

现在你这些变量,你会发现你的任务其余精细:)

jsFiddle here.

+0

谢谢。我还没有尝试过每个功能,但很高兴看到它将如何完成。 – pedwards

相关问题