I want to get data from multiple attributes on click event. Suppose I have a div with class test_class and ID testID as given below.
<div class="test_class" id="testId"><!-- ... --></div>
I want to get the value of the class and id attributes and store them in separate variables.
var classattr = 'test_class';
var idattr = 'testId';
How can I make this? I would like to avoid calling attr() multiple times.
I want to get data from multiple attributes on click event. Suppose I have a div with class test_class and ID testID as given below.
<div class="test_class" id="testId"><!-- ... --></div>
I want to get the value of the class and id attributes and store them in separate variables.
var classattr = 'test_class';
var idattr = 'testId';
How can I make this? I would like to avoid calling attr() multiple times.
-
use
.attr()like$("#testId").attr("id")for id and$("#testId").attr("class")for class – guradio Commented Jun 9, 2017 at 9:50 - @guradio Is there is any way to get the values in once I mean I don't have to use attr() multiple times – user7791702 Commented Jun 9, 2017 at 9:52
-
you are still going to use
.attr()map them in an array using map and getting.attr()– guradio Commented Jun 9, 2017 at 9:53 - Store it in a variable. – Sagar V Commented Jun 9, 2017 at 9:54
10 Answers
Reset to default 2You can get those with javascript too, like below.
var attrs = document.getElementById("testId").attributes;
var classattr = attrs["class"].nodeValue;
var idattr = attrs["id"].nodeValue;
console.log(classattr);
console.log(idattr);<div class="test_class" id="testId">
</div>Even simpler with object destruction:
var t = document.getElementById("testId");
var {className, id} = t;
console.log(className, id)<div class="test_class" id="testId">You can add any other attributes between surly braces if you need.
console.log("Div id is "+$('div').attr('id'))
console.log("Div class is "+$('div').attr('class'))<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_class" id="testId"></div>- Use .attr()
Description: Get the value of an attribute for the first element in the set of matched elements.
USE:
$(this).each(function() {
$.each(this.attributes, function() {
// this.attributes is not a plain object, but an array
// of attribute nodes, which contain both the name and value
if(this.specified) {
console.log(this.name, this.value);
}
});
});
You will not have to use .attr multiple times.
For eg: a single span tag with multiple attributes can be obtained using the above code.
what you can do is when a certain button has been pressed. lets say the class btn has been clicked.
<html>
<a href="#" class="button">Click me</a>
<div class="test_class" id="testId> Some stuff in here </div>
</html>
<script>
$("").click(function(){
var dvclass = $(".test_class").attr("class");
var dvid = $(".test_class").attr("id");
});
</script>
You don't need jQuery at all. By the magic of vanilla JavaScript, you can already access the class and id of any element you have. There is even a neater interfaces for adding/removing classes: classList. You can use them as follows, in a jQuery click handler:
$('.test_class').click(function() {
console.log(this.className, this.id);
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_class" id="testId">Click me!</div>Or without any jQuery:
document.querySelector('.test_class').addEventListener('click', function() {
console.log(this.className, this.id);
});<div class="test_class" id="testId">Click me!</div>To access other attributes, you can use other methods.
data-*attributes? Usedataset.nameattribute? Well...name.- Attribute that cannot be accessed directly?
getAttribute()has you covered.
function getDomNodeProps(domNode) {
let attrs = {}
Array.from(domNode.attributes).forEach(a => attrs[a.name] = a.value);
return attrs;
}
console.log(getDomNodeProps(document.getElementById("testId")))
Try with attr().And do with click function .Then find the attr value using this.attr
$('.test_class').click(function() {
var cls = $(this).attr('class');
var id = $(this).attr('id');
console.log(cls, id)
})<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_class" id="testId">click</div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
var clnm=$(this).attr("class");
var idSel=$(this).attr("id");
});
});
</script>
</head>
<body>
<div class="test_class" id="testId">
Example
</div>
</body>
</html>
$("div").click(function(){
var classattr=$(this).attr("class");
var idattr=$(this).attr("id");
console.log(classattr,idattr);
});
$(this).each(function() {
$.each(this.attributes, function() {
// this.attributes returns array
if(this.specified) {
console.log(this.name, this.value);
}
});
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744221476a4563801.html
评论列表（0条）