如何使用 JQuery 从相关元素中获取 html 文本？

Question

所以我试图在 HTML 标签中获取特定文本，该标签是它的亲戚。问题是我有多个 Parents，这意味着我有多个电话和不同的短信。

举个例子：

    <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();
    });
});

问题是我无法获得想要的文本，而且我不知道是否必须解析，即使我已经尝试过了。我希望你能帮助我。

Answer 1

您可以将 .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>

Answer 2

您可以使用 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();
});

来自文档：

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

Answer 3

<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 class $('grandChild.wanted').text() 就足以在单击 grandChild4 时在 grandChild1 中获取文本。

如果有多个相同的标签 .wanted 你必须使用 .each & $(this).text() 来获取标签的文本内容

如果有多个.calling class那么

$('.calling').on('click',function(event){
  $(this).closest('parent').find('.wanted').text().trim()
})

closest() 将始终在 DOM 树中向上移动，并将与第一个匹配的元素匹配。 trim 用于去除任何白色 space

Answer 4

The thing is that I cannot get the Text wanted, and I don't know if I have to parse or not, even when I've already tried so. I hope you can help me.

这是因为你在做var message = $(this).parent().siblings(".wanted").html();

$(这个) -> calling class(孙子)

$(this).parent() -> <child></child>(3rd one)

$(this).parent().siblings() 将给出其他 <child> 个元素（第一个和第二个）

因此你应该做 $(this).parent().siblings().find('.wanted') 以便它可以在兄弟姐妹 (<child>) 中找到孙子。

Answer 5

正如@Nikhilesh-k-v 发布的那样，它一直给了我三个不同孩子的价值，所以我不得不多指定一点。谢谢大家，感谢每条评论。

Answer 6

有很多方法可以得到这个：查看所有这些

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');
});

如何使用 JQuery 从相关元素中获取 html 文本？

How to get html text from a relative element using JQuery?

html

javascript

tree

jquery

parent