如何使用 JQuery 从相对元素获取 html 文本
How to get html text from a relative element using JQuery?
所以我正在尝试获取HTML标签中的特定文本,该标签是它的相对文本。问题是我有多个父母,这意味着我有多个电话和不同的短信想要。
举个例子:
<parent>
<child>
<grandchild class="wanted">Text</grandchild>
<grandchild></grandchild>
</child>
<child>
<grandchild></grandchild>
<grandchild></grandchild>
</child>
<child>
<grandchild class="calling"></grandchild>
<grandchild></grandchild>
</child>
</parent>
还有我的剧本
$(document).ready(function(){
$(".calling").click(function(){
var message = $(this).parent().siblings(".wanted").html();
});
});
问题是我无法获得想要的文本,即使我已经尝试过,我也不知道我是否必须解析。我希望你能帮助我。
您可以将.closest()
与选择器一起使用 "parent"
,.find()
与选择器一起使用".wanted"
$(document).ready(function() {
$(".calling").click(function() {
var message = $(this).closest("parent").find(".wanted").html();
console.log(message)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<parent>
<child>
<grandchild class="wanted">Text</grandchild>
<grandchild></grandchild>
</child>
<child>
<grandchild></grandchild>
<grandchild></grandchild>
</child>
<child>
<grandchild class="calling">click</grandchild>
<grandchild></grandchild>
</child>
</parent>
问题是我无法得到想要的文本,我不知道我是否 必须解析或不解析,即使我已经尝试过了。我希望你能 帮帮我。
这是因为你正在做var message = $(this).parent().siblings(".wanted").html();
$(这个) -> calling
类(孙子)
$(this).parent() -> <child></child>(3rd one)
$(this).parent().siblings()
将给出其他<child>
元素(第 1 和第 2 个)
因此,您应该执行$(this).parent().siblings().find('.wanted')
,以便它可以在兄弟姐妹(<child>
)中找到孙子。
您可以使用类似on()
以下内容附加事件处理程序:
$("body").on("click", ".calling", function(){
// traverse several steps up to the parent, then back down to desired element.
var message = $(this).parents("parent").find(".wanted").text();
});
从文档中:
.parents()
和.parent()
方法相似,只是后者只在 DOM 树中向上移动一个级别。
<parent>
<child> // Child 1
<grandchild class="wanted">Text</grandchild> // grandChild1
<grandchild></grandchild>
</child>
<child> // Child 2
<grandchild></grandchild> // grandChild2
<grandchild></grandchild> // // grandChild3
</child>
<child> // Child 3
<grandchild class="calling"></grandchild> // grandChild4
<grandchild></grandchild> // grandChild5
</child>
</parent>
如果calling
类的单一用法$('grandChild.wanted').text()
就足以在单击grandChild4时获取grandChild1中的文本。
如果有多个标签具有相同的.wanted
则必须使用.each
&$(this).text()
来获取标签的文本内容
如果有多个.calling
类,则
$('.calling').on('click',function(event){
$(this).closest('parent').find('.wanted').text().trim()
})
closest()
将始终在 DOM 树中向上移动,并将与第一个匹配的元素匹配。 trim
用于删除任何空格
正如 @Nikhilesh-k-v 发布的那样,它一直为我提供了三个不同孩子的值,所以我不得不多指定一点。谢谢大家,感谢每条评论。
有很多方法可以得到这个:查看所有这些
console.clear();
$(document).ready(function() {
$(".calling").on('click', function() {
var messages = {};
messages.message0 = $(this).parents('parent').find(".wanted").html();
// or
messages.message1 = $(this).parent().parent().find(".wanted").html();
messages.message2 = $(this).parent('child').siblings().find(".wanted").html();
messages.message3 = $(this).parent('child').siblings().find(".wanted").text();
messages.message4 = $(this).parentsUntil('parent').siblings().find(".wanted").html();
messages.message5 = $('parent').find(".wanted").html(); // if only ONE parent
messages.message6 = $('parent').find("grandchild.wanted").text(); // if only ONE parent and in grandchild element
messages.message7 = $('parent').find(".wanted").text(); // if only ONE parent
messages.message8 = $('parent').find(".wanted").first().text(); // if first ONE present if many
messages.message9 = $('body').find(".wanted").first().text(); // not recommended but...
messages.message10 = $('body').find(".wanted").first().text(); // not recommended but...
messages.message11 = $('parent').find(".wanted").first().text(); // not recommended but...
messages.message12 = $('parent').find('child').find('grandchild').filter(".wanted").text(); // not recommended but...
messages.message13 = $('grandchild.wanted').text(); // all of them...
messages.message14 = $('grandchild.wanted').eq(0).text(); // first of them...
messages.message15 = $('grandchild.wanted:first()').text(); // first of them...
console.dir(messages);
}).trigger('click');
});
- 获取HTML属性中CSS声明的值
- 使用Java从javascript链接获取html更改
- 从模板标签获取html
- 无法获取@Html.ListBoxFor()的正确语法
- 获取html表单信息并使用ajax将其推送到PHP
- 获取HTML的第一句话
- PHP和JavaScript:在PHP中获取HTML值
- 获取 HTML 5 音频控制文件位置并在不使用 id 选择器的情况下更新 src
- 如何获取html中输入框的值并对其进行操作
- Javascript从外部站点获取html
- 在不使用sort()的情况下获取HTML LI元素的副本
- 如何在单击行时获取html表中第一列的值
- 在Javascript服务器应用程序之后获取HTML
- 如何使用位置获取滚动功能获取 HTML 中的元素标签
- 如何使用 JQuery 从相对元素获取 html 文本
- 从 Rails dom_id 方法获取 HTML 类名
- TypeScript - 如何获取 HTML 元素,例如在 Javascript 中使用美元符号 ($)
- 为什么我的“for”循环只获取 html 中的最后一项
- objective-C 在 UIWebView 中的 ajax 调用后获取 HTML 值
- 从用户那里获取 HTML 输入