javascript - 如何使用 Jquery 获取具有特定 id 的 div 值?
问题描述
我有带有添加按钮的数据列表。在按钮上单击如何使用 jquery 获取 id="rnumber" 的 div 值。我想要按钮单击上的数字。我不知道如何获得我尝试的那个号码,但每次我获得第一个列表号码时,我都想要相同班级的号码。前任。如果我单击第二个 li 按钮,我仍然会得到第一个 li 类 div 值。我尝试使用父母和孩子选择器,但我没有得到答案。
<div class="modal-body">
<ul class="searchresult" style="list-style-type: none;">
<li>
<div class="kt-font-lg">AKash</div>
<div class="kt-font-lg rnumber" >1234567890</div>
<button class="kt-font-lg btn-primary " onclick="addNumber()">Add</button>
</li>
<li>
<div class="kt-font-lg">Deep</div>
<div class="kt-font-lg rnumber" >9012345678</div>
<button class="kt-font-lg btn-primary " onclick="addNumber()">Add</button>
</li>
</ul>
</div>
onClick 功能:
function addNumber(){
rnumber = $('#rnumber');
var ttt = rnumber.text();
console.log(ttt);
}
解决方案
您必须保持您的 ID 唯一。复制身份证是犯罪行为。改为a class
。由于多个元素共享相同的功能,请使用event.target
or this
。你可以使用这样的东西:
function addNumber() {
console.log($(event.target).prev().text());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<ul class="searchresult" style="list-style-type: none;">
<li>
<div class="kt-font-lg">AKash</div>
<div class="kt-font-lg rnumber">1234567890</div>
<button class="kt-font-lg btn-primary" onclick="addNumber()">Add</button>
</li>
<li>
<div class="kt-font-lg">Deep</div>
<div class="kt-font-lg rnumber">9012345678</div>
<button class="kt-font-lg btn-primary" onclick="addNumber()">Add</button>
</li>
</ul>
</div>
更好的方式是使用不显眼的 JavaScript 事件处理:
$(function () {
$(".btn-primary").click(function () {
console.log($(this).prev().text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<ul class="searchresult" style="list-style-type: none;">
<li>
<div class="kt-font-lg">AKash</div>
<div class="kt-font-lg rnumber">1234567890</div>
<button class="kt-font-lg btn-primary">Add</button>
</li>
<li>
<div class="kt-font-lg">Deep</div>
<div class="kt-font-lg rnumber">9012345678</div>
<button class="kt-font-lg btn-primary">Add</button>
</li>
</ul>
</div>
推荐阅读
- ruby-on-rails - Wicked PDF gem 在本地工作,但在部署时显示不同的字体
- r - 在闪亮会话结束时保存用户输入?
- sql - 发送到客户端后无法设置标题(发布到数据库)
- asp.net - Mono + Apache + ASP.NET 中的 500 错误
- r - 多元回归Excel
- nginx - 如何删除 .php 和 .html 到 URL 并在 Nginx 中添加斜杠?
- string - 使用 bash 从包含多个单词的字符串中的每个单词中提取最后一位数字
- regex - 在 Splunk 中将一组字符转置为另一组字符
- mysql - MySQL - 每个州根据单个 export_values 的总和导出的顶级产品
- python-3.x - AttributeError:Roboclaw 实例没有属性“_port”