Question

我正在尝试使用JQUERY来获取单击的元素的子节点的值。我一直在研究这个，但没有找到一个似乎有用的答案。我试图获得“这就是我想要的”

的文字

我的HTML看起来与此类似

<div class="a">
    <article class="b">
        <section class="c">
            <div class="d">
                <a class="e" href="https://"><img src="https:/"></a> 
                    <div class="f"><div class="g">
                        <a href="https:" >this is what i want</a>

我的JQUERY看起来与此类似

 $("div").click(function(){

var a = jQuery(this).children('.g > a').html;
      console.log(a);
});

我也试过

    $("div").click(function(){

var a = jQuery(this).find('.g > a').html;
      console.log(a);
});

Answer 1

>选择器仅适用于直接子女，而不是直接子女。并且您在第二个示例中错过了.html()。

＆＃13;

$("div.a").click(function(){
  var a = jQuery(this).find('.f a').html();
  console.log(a);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    <article class="b">
        <section class="c">
            <div class="d">
                <a class="e" href="https://"><img src="https:/"></a> 
                    <div class="f"><div class="g">
                        <a href="https:" >this is what i want</a>

＆＃13;

Answer 2

我认为你应该通过className调用它来点击div更具体。

＆＃13;

$(".a").click(function(e){
  var a = $(this).find(".f").children("a");
  console.log($(a).text());
});

＆＃13;

.a{
  border:1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    <article class="b">
        <section class="c">
            <div class="d">
                <a class="e" href="https://"><img src="https:/"></a> 
                <div class="f"><div class="g"></div>
                        <a href="https:" >this is what i want</a>
                        </div>
              </div>
              </section>
              </article>
              </div><!--end a-->

＆＃13;

在jquery中选择子元素的内部HTML

2 个答案: