Question

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

Answer 1

而不是.closest()：

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

使用.find()：

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

.closest（）：

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

.find（）：

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

Answer 2

使用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>

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

如果您想从父元素获取：

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

如果你想从$ this

获得

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

jQuery获取子HTML元素的值

2 个答案:

.closest（）：

.find（）：