我有一张像这样的桌子:
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
我当前正在使用jquery get从data
属性中提取所有名称。
但是,我还需要查看它被引用了多少次(x3,x2或x1),它们是独立的文本节点。
这是我的循环:
jQuery(".child-row123 a[data-name]").each(function(){
var dataname = jQuery(this).data('name');
//Alert
if(!jQuery.isNumeric(dataname)){
alert(dataname);
}
});
使用jQuery,是否有可能在x3,x2或x1的文本节点旁边获取数据名称?我正在尝试从逻辑上弄清楚,我猜我需要查看每个锚标记的末尾吗?
答案 0 :(得分:2)
您可以通过.nextSibling
jQuery(".child-row123 a[data-name]").each(function() {
var name = this.getAttribute("data-name"), // as the name is a string we don't really need the magic from jQuerys .data()
refs = this.nextSibling.textContent;
console.log(name, refs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
答案 1 :(得分:2)
尝试使用DOM函数.nextSibling选择下一个节点,并使用nodeValue获取“被引用(x3,x2或x1)”
来源:How to get text node after element?
jQuery(".child-row123 a[data-name]").each(function() {
var dataname = jQuery(this).data('name');
var nodetext = jQuery(this)[0].nextSibling.nodeValue;
//Alert
if (!jQuery.isNumeric(dataname)) {
console.log("Data: " + dataname + "\nreferenced: " + nodetext);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
答案 2 :(得分:1)
如果可能的话,我将要做的事情和您可以做什么。将您的文本包裹在一个范围内,然后使用next()
获得文本。使用此解决方案,您可以拥有更加结构化的html,而不是使用浮动文本。
$(".child-row123 a[data-name]").each(function() {
var dataname = $(this).data('name');
//Alert
if (!$.isNumeric(dataname)) {
console.log(dataname + " " + $(this).next().text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> <span>x3</span><br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> <span>x2</span><br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> <span>x1</span><br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> <span>x3</span><br>
</td>
</tr>
</tbody>
</table>