如何使用jQuery访问$（this）关键字下的子元素

Question

我想将值为h3的属性标题添加到具有类名（提交）的href中

但是我无法访问用类名选择的每个div中的h3文本。请帮忙。

 $(document).ready(
    function ()
        {
            $(".topic ").each(
            function()
                {
                    var title=$(this h3).text();
                    console.log(title)
                    
                    $(this ".submit").attr("title",title);
                }
            
            );
        }
    
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
  </div>
  
  <div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
  </div>
  
  <div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
  </div>
  
  <div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
  </div>

Answer 1

将find与$(this)一起使用，如下所示。

$(".topic ").each(
  function() {
    var title = $(this).find('h3').text();
    console.log(title)
    $(this).find(".submit").attr("title", title);
  }

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
</div>

<div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
</div>

<div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
</div>

<div class="topic">
  <h3><a href="">Shoulder Arthritis</a></h3>
  <a href="" class="submit"></a>
</div>

Answer 2

您可以使用方法.find()。 可以找到文档here

例如，您的代码应如下所示：

$(document).ready(
function ()
    {
        $(".topic ").each(
        function()
            {
                var title=$($(this).find("h3")).text();
                console.log(title)

                $($(this).find(".submit")).attr("title",title);
            }

        );
    }

);

也可以执行一些解决方法，请参见此处：

$(document).ready(
function ()
    {
        $(".topic ").each(
        function()
            {
                var id = $(this).attr('id');
                var title=$('#' + id + ' > h3').text();
                console.log(title)

                $('#' + id + ' > .submit').attr("title",title);
            }

        );
    }

);

>搜索该元素的子元素。 因此$('#' + id + ' > .submit')搜索具有给定ID的元素的子元素，该子元素具有提交类。