点击时如何从链接获取 id(记录)?

Question

我想在单击类时从href链接获取 idmodal-view(在本例中我想返回 6(，但不知道如何做。

我尝试了$this.attr('href')(检查attr功能是否正常工作(，但它返回undefined.

任何建议，提前感谢。

<span class="action_item modal-view">
<a href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>

Answer 1

您的代码必须$(this).find('a')。$(this)是点击元素的对象，find('a')将在点击的元素内搜索a标签。要获取id，您可以执行类似操作$(this).find('a').attr('href').split('/')[3].在这里，拆分将分离您的href值并创建一个数组，并可以通过其索引访问它。

$('.modal-view').on('click', function(e){
e.preventDefault();
console.log($(this).find('a').attr('href'));
console.log($(this).find('a').attr('href').split('/')[3])

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="action_item modal-view">
<a href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>

Answer 2

通过jQuery，我们可以做到。

$(document).ready(function(){
$("a").click(function(){
alert("id of the link ="+this.id);
});
});

Answer 3

您可以将自定义属性(如itemId(添加到<a>标签中，然后根据需要检索它。

Answer 4

假设你使用jQuery：

$("span.action_item.modal-view").click(function(){
let href = $(this).find('a').attr('href');
console.log(href);
});

.prop()也应该工作

Answer 5

我看到没有与您附加的 HTML 代码段相关联的id。您需要将其与id关联才能从 DOM 访问它。

<span class="action_item modal-view">
<a id="anc-id" href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>

从你上面的描述中，我感觉到你正在使用jQuery。

$(document).ready(function(){
$("a").attr("id"); //anc-id
});

如果您的页面中有许多a标签，请使用class进行过滤的更具体方法 -

<span id="parent-id" class="action_item modal-view">
<a class="anc" id="anc-id" href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>
$(document).ready(function(){
$("a.anc").attr("id");
});

如果有许多带有类.anc的a标签，那么我们需要循环a以获取所有 id。

解决方案 2 -

如果你的需要只是在没有任何id的情况下抓住元素，那么 -

var element = $("span.modal-view > a");
element.addClass("newClass");
element.append('...');

查看此内容以获取更多信息 - https://api.jquery.com/element-selector/

Answer 6

在这种情况下，您可以使用$(this).find('a').attr('href')获取href的值，然后您需要拆分返回的 uri 以获取此数值 (id(，例如，

$(".modal-view").click(function() {
var id = $(this).find('a').attr('href').split('/')[3];
console.log(id) // 6
})

现在id包含所需的值。

Answer 7

您可以使用href上的正则表达式来查找 ID。我假设它在下面的答案中总是一个数字。

function onTriggerClicked(event) {
// Cancel the navigation to the href or the example will fail.
event.preventDefault();

const
// Get the href attribute from the clicked element.
href = event.target.href,
// Create regex which will match "/" + (one or more digits) + "/".
regex = //(d+)//,
// Perform the regex on the href.
match = regex.exec(href);

// When match is null it means the href doesn't contain one or more 
// digits sandwiched "/"
if (match === null) {
console.log('no valid ID found in href');
} else {
// The regex found a number, it is in the first capture group
// so it can find in item 1 of the match array.
console.log('The ID in the href is: ', regex.exec(href)[1]);
}
}
// Add a click listener to each of the elements with the modal-view class.
const
triggers = Array.from(document.querySelectorAll('.modal-view'));
triggers.forEach(trigger => trigger.addEventListener('click', onTriggerClicked));

<span class="action_item modal-view">
<a href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>
<span class="action_item modal-view">
<a href="/admin/sponsoreds/61/edit">Edit Sponsored 2</a>
</span>
<span class="action_item modal-view">
<a href="/admin/sponsoreds/6a/edit">Edit Sponsored 3</a>
</span>