반응형
jQuery는 ID / 값을 얻습니다.
<li>클릭 한 항목 의 ID를 어떻게 알릴 수 있습니까?
<ul id='myid'>
<li id='1'>First</li>
<li id='2'>Second</li>
<li id='3'>Third</li>
<li id='4'>Fourth</li>
<li id='5'>Fifth</li>
</ul>
(ID를 대체 할 수있는 것은 가치가 있거나 다른 것도 작동합니다.)
$("#myid li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
ID를 다른 것으로 바꾸는 것에 대해 이야기하는 경우 :
$("#myid li").click(function() {
this.id = 'newId';
// longer method using .attr()
$(this).attr('id', 'newId');
});
여기에서 데모. 공정하게 말하면 먼저 문서를 읽어보아야합니다.
- http://api.jquery.com/category/selectors/
- http://api.jquery.com/category/events/
- http://api.jquery.com/attr/
HTML 코드를 약간 변경하는 경우-ID 제거
<ul id='myid'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
그런 다음 원하는 jquery 코드는 ...
$("#myid li").click(function() {
alert($(this).prevAll().length+1);
});
ID를 넣을 필요가 없으며 li 항목을 계속 추가하십시오.
데모 살펴보기
유용한 링크
클릭 후이 방법을 사용하여 각 li의 값을 얻을 수 있습니다.
HTML :-
<!DOCTYPE html>
<html>
<head>
<title>show the value of li</title>
<link rel="stylesheet" href="pathnameofcss">
</head>
<body>
<div id="user"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="pageno">
<li value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
<li value="9">9</li>
<li value="10">10</li>
</ul>
<script src="pathnameofjs" type="text/javascript"></script>
</body>
</html>
JS :-
$("li").click(function ()
{
var a = $(this).attr("value");
$("#user").html(a);//here the clicked value is showing in the div name user
console.log(a);//here the clicked value is showing in the console
});
CSS :-
ul{
display: flex;
list-style-type:none;
padding: 20px;
}
li{
padding: 20px;
}
If You Have Multiple li elements inside an li element then this will definitely help you, and i have checked it and it works....
<script>
$("li").on('click', function() {
alert(this.id);
return false;
});
</script>
반응형
'Development Tip' 카테고리의 다른 글
| CASE 또는 IF ELSEIF가있는 MySQL select 문? (0) | 2020.11.07 |
|---|---|
| VS2008에서 "대상 어셈블리에 서비스 유형이 없습니다"오류 메시지를 제거하려면 어떻게해야합니까? (0) | 2020.11.07 |
| C ++ 문자열의 문자 정렬 (0) | 2020.11.07 |
| 읽기 전용 속성 또는 메서드를 사용하려면? (0) | 2020.11.07 |
| AngularJS 1.x에서 필터를 단위 테스트하는 방법 (0) | 2020.11.07 |