问题:
I have this small HTML page which exposes my problem. I want to get the id of the first ancestor of my input element (#input-1). When the user changes the option value, the...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I have this small HTML page which exposes my problem. I want to get the id of the first ancestor of my input element (#input-1
). When the user changes the option value, the JavaScript code should get the id of the #li-1
element and display it. Unfortunately all I get is a undefined
and I don't know why.
The parents()
function should traverse up the DOM tree and find the li
element, then get the id via the .attr()
function
$("#input-1").on("change", function(elem) {
var id = $(elem).parents("li").attr("id");
alert(id);
})
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</body>
</html>
回答1:
You have to use .closest()
$("#input-1").on("change", function(){
var id = $(this).closest("li").attr("id");
alert(id);
})
Also, there is no need to use elem
in this case, just use this
in $(this)
Demo
$("#input-1").on("change", function(elem) {
console.log($(elem.target).closest("li").attr("id"))
var id = $(this).closest("li").attr("id");
alert(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
回答2:
You have to use this
keyword
$(this).parents('li').attr('id')
$("#input-1").on("change", function(elem) {
var id = $(this).parents('li').attr('id');
console.log(id);
})
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</body>
</html>
回答3:
I really advise to stop using jQuery for such simple operations, and learn how the DOM works. Here's the simple vanilla Javascript solution, which I consider so much cleaner.
What is being implicitly passed to an event listener is the Event
object that triggers it.
If you need to access the element the event occurred on, either use an ES5 function (like in my code example) and access the element inside the handler function using this
, or use an ES6 arrow function ( (event) => { /* ... */ }
) and then access the element using event.target
inside the handler function.
Please note that the HTML you've shown is actually invalid, because li
cannot exist without a parent ul
or ol
.
document.getElementById('input-1').addEventListener('change', function(event) {
console.log(this.closest('li').id);
})
<ul>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</ul>
With ES6, you can even destructure the implicitly passed event object like this:
document.getElementById('input-1').addEventListener('change', ({target: elem})=>{
console.log(elem.closest('li').id);
})
<ul>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</ul>
({target: elem}) => { /* ... */ }
What this does: It says from the object passed to this function, get me the target
property and make it available as elem
inside the function.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names
回答4:
Use .closest() or parent() You should get the parent of #input-1 not the select element
$("#input-1").on("change", function(){
var id = $(this).closest('li').attr('id');
alert(id);
})
or
$("#input-1").on("change", function(){
var id = $(this).parents('li').attr('id');
alert(id);
})
回答5:
You can try below code to get id of first option element:
$("#input-1:first-child").attr("id")
回答6:
<select id="input-1" onchange="GetId();"> <option value="0">test0</option> <option value="1">test1</option> </select>
declare this method in script and call in onchange of dropdownlist
`function GetId(){ alert($('#input-1option:selected').attr("value"));}`
if it not working please check jquery library or replace that with given CDN <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">