jQuery获取子HTML元素的值

How can I get the text inside the h4 tag with class .media-heading in the following example when a person clicks on the link. I've tried using the closest method and it doesn't seem to work. see below:

当人们点击链接时，如何在以下示例中使用类.media-heading获取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>

$('a.external').on('click', function(e) {
    e.preventDefault();
    var src = $(this).attr('href');
    var title = $(this).closest('.media-heading').text();

    $('#extLinkModal').modal('show');
    $('#extLinkModal .modal-title').html( title );
    $('#extLinkModal iframe').attr('src', src);
});

2 个解决方案

#1

instead of .closest():

而不是.closest（）：

$(this).closest('.media-heading').text();

use .find():

使用.find（）：

$(this).find('.media-heading').text();

---

.closest():

It traverses back to parent element provided as a string whether that is id/class/tagname/"[attribute/s].

它遍历回作为字符串提供的父元素，无论是id / class / tagname /“[attribute / s]。

.find():

It gets the deep child id/class/tagname/[attribute/s].

它获取深度子id / class / tagname / [attribute / s]。

#2

Use Jquery

使用Jquery

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

-Function

-功能

$('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> 

http://jsfiddle.net/98f3psLv/6/

http://jsfiddle.net/98f3psLv/6/

if you want to get from parent element:

如果你想从父元素获取：

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

if you want to get from $this

如果你想从$ this获得

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