Question

这是我的HTML文件：

<a class="fc-time-grid-event fc-event fc-start fc-end fc-draggable fc-resizable" style="top: 703px; bottom: -791px; z-index: 1; left: 0%; right: 0%;">
    <div class="fc-content">
        <div class="fc-time" data-start="4:00" data full="4:00 PM">
            <span>4:00</span>
        </div>
     </div>
    <div class="fc-title">Work Order 1003</div>
    <div class="fc-bg"></div>
    <div class="fc-resizer"></div>
</a>

按下此div <div class="fc-title">Work Order 1003</div>时如何才能获得此div内容<div class="fc-bg"></div>？

Answer 1

由于.fc-title是点击元素的上一个兄弟，您可以使用.prev()选择器：

$('body').on('click','.fc-bg',function(){
  alert($(this).prev().text());
});

或.siblings(".fc-title")

$('body').on('click','.fc-bg',function(){
  alert($(this).siblings(".fc-title").text());
});

Answer 2

您需要使用.prev('div') jQuery函数来选择点击的.fc-bg类的前一个div。

$(document).on("click",".fc-bg",function(){
    alert($(this).prev("div").text());
});

OR

$(document).on("click",".fc-bg",function(){
    alert($(this).siblings(".fc-title").text());
});

<强> Demo

Answer 3

正如你所说，你的html动态变化，你可能必须使用event-delegation：

$(document).on('click', '.fc-bg', function(event){ //delegate the event to the document

    event.preventDefault(); //prevent possible side-effects with a-tag if needed

    var text = $(this).siblings('.fc-title').text();

    $('#result').text(text);
});

注意：建议使用neares static parent进行事件委派，因此您可以使用

$('a.fc-time-grid-event').on('click', '.fc-bg',function(event){})

只要链接没有动态生成。

Demo

如何在jquery中的一个元素的同一级别获取元素的内容？

3 个答案: