JQuery如何使用子元素获取父元素的文本？

Question

我需要获取父div中

标签的文本，而不是子div中的文本。我已经尝试了以下代码，但会获取父div和子div中的所有文本。

注意：我只需要获取父p1和父p2的文本

请downvoters提供原因，以便我未来避免这样的错误

Html

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
    <p>child div</p>
    <button type ="button">click</button>
    </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function(){
        $("button").click(function(){
    
              var a = $(this).parent("div").attr("id");
                
                console.log($("#"+a).parent("div").text());
    
    
                });
    });
    </script>

Answer 1

你可以尝试像这样做。

 $("button").click(function(){
                    alert($(this).parent('div').parent('div').children('p').text())
         })

<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
    <p>child div</p>
    <button type ="button">click</button>
    </div>
    </div><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

- Bharat

---

这个警告是关于“子div”，而不是p1、p2和+1 :) - Akairis

这将获取 <div id="sub"> 的文本，但我只需要父级 p1 和父级 p2 的文本。 - Arun Kumaresh

@Akairis Po 说的是父级 div，所以是正确的，后来他说了 p1、p1，所以 p1 和 p1 是祖先的子元素。 - Bharat

Answer 2

这个工作正常运行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
        <p>child div</p>
         <button type ="button">click</button>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
           var text = $(this).parent("div").parent().children('p').text();
           console.log(text);
        });
    });
</script>
 

- Akairis

---

我不需要 <div id="sub"> 的文本，我需要父级 p1 和 p2 的文本。 - Arun Kumaresh

正确，你没有提出精确的问题。 - Akairis

Answer 3

这句话的意思是，这不是按钮的子元素，而是它的兄弟元素。

$("button").click(function(){
   console.log($(this).closest('div').parent().children('p').text()): // parent p1, parent p2
});

否则，您需要迭代 p 标签并将其推入数组中，然后连接它。

- Sudharsan S

Answer 4

因此，既然问题是检索父级p1和p2的文本，解决方案如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>parent p1</p>
  <p>parent p2</p>
  <div id="sub">
    <p>child div</p>
    <button type="button">click</button>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function() {
    $("button").click(function() {

      $(this).parents("div:not(#sub)").find(">p").each(function(index,value){
        console.log("p " + (index+1) + " = " + $(this).text());
      });
    });
  });
</script>

请注意，有许多方法。首先，您可以在

标签中找到所需的p。

var p = $(this).parents("div:not(#sub)").children("p");

并且

var p = $(this).parents("div:not(#sub)").find(">p");

第二，如果你想为每个p迭代，你可以像答案中那样使用each循环。

p.each(function(){
    console.log($(this).text());
})

否则，您可以通过以下方式获取完整文本

p.text()

- GiuServ

---

正如我在问题中提到的那样，我需要获取父亲p1和父亲p2。 - Arun Kumaresh

Answer 5

我希望以下内容能够奏效，我已经测试过了。

$("#" + a).parent("div").clone().children().remove('#'+ a).text();

- B P

---

请对此进行评论。任何操作？ - B P

Answer 6

这对你有用，希望能帮到你。

parent().parent().children('p').text();

或者

console.log($(this).parent().siblings('p').text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>parent p1</p>
    <p>parent p2</p>
    <div id="sub">
    <p>child div</p>
    <button type ="button">click</button>
    </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function(){
          $("button").click(function(){
           console.log($(this).parent().parent().children('p').text())
console.log($(this).parent().siblings('p').text())
     })
    });
    </script>

- LF00