在这个jquery脚本中卡住了一点。我想在选中复选框时获取tr
中最后一个td
的link
属性。这是 HTML
<tr>
<td><input type="checkbox" name="check" value="happy"></td>
<td style="width: 310px; line-height: 14px;" class="fileName <?php echo $myClass; ?>" ><div style="width: 310px; overflow: hidden;"><a href="https://abcd.com/<?php echo $info."/".$myinfo['name'];?>" title="<?php echo $myinfo['name'];?>" target="_blank"><?php echo $fileName.'.'.$fileExtension; ?></a></div></td>
<td style="width: 150px;"><?php echo $fileSize; ?> KB</td>
<td style="width: 150px;"><?php echo $fileModified; ?></td>
<td style="width: 150px;">
<a href="javascript:void(0);" ><span id="" link="https://abcd.com/<?php echo $info."/".$myinfo['name'];?>" title="<?php echo $myinfo['name'];?>" class="shareIcon"></span></a>
<a href="javascript:void(0);"><span id="deleteIcon" link="<?php echo $myBucket['name'];?>" class="deleteIcon"></span></a>
</td>
</tr>
当有多个复选框时,我想在最后一个 td 中获取每个链接属性。
我尝试的是这个
$("input[name='check']").on('change',function() {
var checked = $("input[name='check']:checked");
// console.log(checked);
$.each(checked,function(){
//console.log(checked.length);
if(checked.length>1){
// console.log('more than 1');
//console.log(checked.parents('td').siblings('.shareIcon'));
checked.parents('td').siblings('.shareIcon'),function(){
console.log($(this).attr('link'));
}
}
})
});
试试这个脚本:
$("input[name='check']").on('change', function () {
var checked = $("input[name='check']:checked");
$.each(checked, function () {
if (checked.length >= 1) {
$.each(checked.parent().siblings().last().children().children(), function() {
console.log($(this).data("link"));
});
}
})
});
而这个 HTML:
<table>
<tr>
<td>
<input type="checkbox" name="check" value="happy">
</td>
<td style="width: 310px; line-height: 14px;" class="fileName <?php echo $myClass; ?>">
<div style="width: 310px; overflow: hidden;"><a href="https://abcd.com/areeb" title="areeb" target="_blank">some_file.php</a>
</div>
</td>
<td style="width: 150px;">212KB</td>
<td style="width: 150px;">some_file.php</td>
<td style="width: 150px;"> <a href="javascript:void(0);"><span id="" data-link="https://abcd.com/areeb" title="<?php echo $myinfo['name'];?>" class="shareIcon"></span></a>
<a href="javascript:void(0);"><span id="deleteIcon" data-link="<?php echo $myBucket['name'];?>" class="deleteIcon"></span></a>
</td>
</tr>
</table>
小提琴
代码说明:
JavaScript 代码:
我刚刚稍微改变了你的条件,以便它甚至可以匹配一个元素。然后$.each()
功能也做了一点改变。我首先针对您的复选框的父级td
,然后我得到所有的兄弟姐妹,然后我选择最后一个兄弟姐妹,然后我弹出它是a
或锚标签的子级,然后我弹出那些a
的子级,它们是span
的,然后对于我记录的每个跨度,它都是data-link
属性。
网页代码:
我刚刚将 link
属性的名称更改为data-link
属性,以便更轻松地通过 data
函数进行访问。
有几个错误:
1)验证您的html,不正确地关闭input
标签。 这导致以下内容
checked.parent() //points the body not its actual td
2)转义/
字符的正确方法。
link="https://abcd.com/<?php echo $info."/".$myinfo['name'];?>" //WRONG
3)下面的代码将只指向input
的父级td
因此失败
checked.parents('td').find('.shareIcon').attr('link')
最后,无需迭代即可获得可以使用:last
的最后一td
$("input[name='check']").on('change',function() {
var checked = $("input[name='check']:checked");
console.log(checked.parents('tr')
.find('td:last')
.find('.shareIcon').attr('link'));
});
更新的 JSFiddle
var inputs = $('input[name="check"]').on('change', function () {
inputs.each(function () {
var i = $(this);
if (i.is(':checked')) {
console.log(i.closest('tr').find('.shareIcon').attr('link'));
}
});
});
小提琴