2017-12-24 3 views
2

요소의 값을 얻을 수 없습니다jQuery를 : 내 템플릿을 나는 봄 부트 템플릿의 요소의 값을 얻을 수

$("#article-list .list-item").click(function() { 
 
    console.log($("#test").val()); 
 
}); 
 
$(document).ready(function() { 
 
    $("#article-list").css("background-color", "red"); 
 
});
<!DOCTYPE html> 
 
<html xmlns:th="http://www.thymeleaf.org"> 
 
    <body> 
 
    <ul id="article-list"> 
 
     <h1 id="test">this is the test content</h1> 
 
     <li class="list-item"> 
 
     <h2 class="article-title">title</h2> 
 
     <p class="article-excerpt">content</p> 
 
     <span class="article-time">2017-12-22</span> 
 
     </li> 
 
     <li class="list-item"> 
 
     <h2 class="article-title">title</h2> 
 
     <p class="article-excerpt">content</p> 
 
     <span class="article-time">2017-12-22</span> 
 
     </li> 
 
    </ul> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

항상 null h1의 값 , 나는 그것을 얻을 수 없다. 그리고 나는 jQuery을 테스트했습니다. jQuery를 사용하여 ul 요소 배경색을 변경하는 것은 괜찮습니다. 이처럼 :

하지만 당신은 입력되는 h1의 콘텐츠를하고 요소를 선택 .val()을 사용할 수 없습니다 h1

+2

당신은'텍스트()'또는'HTML을 사용할 필요가에 대한 HTML 요소의 텍스트를 얻기 위해'발()'방법을 사용할 수 없습니다 사용 –

답변

4

의 값을 얻을 수 없습니다. `) (.text() 또는 .html()

<!DOCTYPE html> 
 
<html xmlns:th="http://www.thymeleaf.org"> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
<ul id="article-list"> 
 
    <h1 id="test">this is the test content</h1> 
 
    <li class="list-item"> 
 
     <h2 class="article-title">title</h2> 
 
     <p class="article-excerpt">content</p> 
 
     <span class="article-time">2017-12-22</span> 
 
    </li> 
 
    <li class="list-item"> 
 
     <h2 class="article-title">title</h2> 
 
     <p class="article-excerpt">content</p> 
 
     <span class="article-time">2017-12-22</span> 
 
    </li> 
 
</ul> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
<script type="text/javascript"> 
 
    $("#article-list .list-item").click(function() { 
 
     console.log($("#test").text()); 
 
    }); 
 
</script> 
 
</body> 
 
</html>

+1

그리고'textarea' 요소. –

+1

* 양식 요소 (입력, 진행률 막대, 텍스트 영역 및 기타 여러 항목) – gdoron

+0

정말 고마워요, 작동합니다. –

관련 문제