jQuery获取子HTML元素的值

在下面的示例中，当一个人单击链接时，如何获取带有class.media标题的h4标记内的文本。我试过使用最接近的方法，但似乎不起作用。见下文：

<li class="media ">
    <a href="example.com" class="external" >
        <div class="media-left">
            ...
        </div>
        <div class="media-body">
            <h4 class="media-heading">An Extertnal Website</h4>
        </div>
    </a>
</li>

<div class="modal " id="extLinkModal" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="extLinkModalLabel"></h4>
            </div>
            <div class="modal-body">
                <iframe name="myiframe" id="myiframe" frameborder="0"   width="100%" height="100%" ></iframe>
            </div>
        </div>
    </div>
</div>

而不是

.closest（）

：

使用

.find（）

：

---

.closest（）： 它将遍历回作为字符串提供的父元素，无论该元素是id/class/tagname/“[attribute/s]

.find（）： 它获取深层子id/class/tagname/[attribute/s]。

使用Jquery

$(".media-heading").text()

-作用

$('a.external').on('click', function(e) {
   alert($(".media-heading").text());
    $(".modal-title").text($(".media-heading").text());
});

<li class="media ">
    <a href="#" class="external" >
        <div class="media-left">
            ...
        </div>
        <div class="media-body">
            <h4 class="media-heading">An Extertnal Website</h4>
        </div>
    </a>
</li>

<div class="modal " id="extLinkModal" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="extLinkModalLabel"></h4>
            </div>
            <div class="modal-body">
                <iframe name="myiframe" id="myiframe" frameborder="0"   width="100%" height="100%" ></iframe>
            </div>
        </div>
    </div>
</div> 

如果你想从这个$

$(this).find(".media-heading").text()

closest（）

向上移动DOM树，您需要向下移动，因此使用

find（）

。

$('a.external').on('click', function(e) {
   alert($(".media-heading").text());
    $(".modal-title").text($(".media-heading").text());
});

<li class="media ">
    <a href="#" class="external" >
        <div class="media-left">
            ...
        </div>
        <div class="media-body">
            <h4 class="media-heading">An Extertnal Website</h4>
        </div>
    </a>
</li>

<div class="modal " id="extLinkModal" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="extLinkModalLabel"></h4>
            </div>
            <div class="modal-body">
                <iframe name="myiframe" id="myiframe" frameborder="0"   width="100%" height="100%" ></iframe>
            </div>
        </div>
    </div>
</div> 

$(".external .media-body .media-heading").text()

$(this).find(".media-heading").text()