jquery - 如何选择属性等于的div

Question

我无法通过根据属性值选择 div 来选择 div 的 html 内容。

我的html是这样的:

<div id="infowrap1" class="widgetInfobox" possition="1" wid="QI" style="">.....</div>
<div id="infowrap2" class="widgetInfobox" possition="2" wid="CP" style="">.....</div>
<div id="infowrap3" class="widgetInfobox" possition="3" wid="PP" style="">.....</div>
<div id="infowrap4" class="widgetInfobox" possition="4" wid="MT" style="">.....</div>

假设我想获取 possition=1 的 div 的 html() ... 我尝试使用

var p1=$(".widgetInfobox [possition='1']").html();
alert(p1); 

..但我得到“未定义”，如果我仅提醒 $(".widgetInfobox [possition='1']") 我得到 [object Object]。如果我选择 .text() 我会得到空字符串。

我该怎么做？ 提前致谢

Answer 1

jQuery 的 sizzle 选择器引擎遵循 CSS 规则。因此，要使用多个子句选择元素，不应在它们之间添加空格。试试这个:

var p1 = $(".widgetInfobox[possition='1']").html();

还应该注意的是，possition 和 wid 不是 div 元素的标准属性。使用它意味着您的 HTML 无效。您应该使用 data-* 属性:

<div id="infowrap1" class="widgetInfobox" data-position="1" data-wid="QI" style="">.....</div>
<div id="infowrap2" class="widgetInfobox" data-position="2" data-wid="CP" style="">.....</div>
<div id="infowrap3" class="widgetInfobox" data-position="3" data-wid="PP" style="">.....</div>
<div id="infowrap4" class="widgetInfobox" data-position="4" data-wid="MT" style="">.....</div>

var p1 = $(".widgetInfobox[data-position='1']").html();