JQuery 内容父母

Question

如何进入function (e)父母的内容#message , #date ？ 多次使用parent() ？ 也许还有另一种方式？

JQuery

    $(document).ready(function () {
        $(document).on('click', '#quote', function (e) {
            // How to get here content of #message, #date of that div where Quote was clicked?
            // Example "PostNumber 751883","7/31/2009 12:00:00 AM"
        });
    });

HTML

<ul>
    <li>
        <div class="flexbox-container">
            <div class="flexbox-date">
                <div class="topic-header">
                    <div class="date-item">
                        <div style="display:flex; ">
                            <div style="align-self: center;" id="date">
                                7/31/2009 12:00:00 AM
                            </div>
                            <div style="align-self: center;">
                                <a id="quote" class="btn btn-light btn-sm">Quote</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="message" class="flexbox-message">
                PostNumber 751883
            </div>
        </div>
    </li>
    <li>
        <div class="flexbox-container">
            <div class="flexbox-date">
                <div class="topic-header">
                    <div class="date-item">
                        <div style="display:flex; ">
                            <div style="align-self: center;" id="date">
                                7/22/2009 12:00:00 AM
                            </div>
                            <div style="align-self: center;">
                                <a id="quote" class="btn btn-light btn-sm">Quote</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="message" class="flexbox-message">
                PostNumber 743123
            </div>
        </div>
    </li>
</ul>

Answer 1

您需要从那里获取其父元素到<li>标记，找到#message和#date元素

使用最接近：

console.log($(this).closest('li').find("#date").text())
console.log($(this).closest('li').find("#message").text())

只是修剪它。

Answer 2

每页只能使用一次 html 标记的id 。 另外，如果可能的话，您应该将您的内联style放入 css 文件中。

我用类修改了您的 html，您也可以尝试以下 jQuery。

 $(document).ready(function() { $('.quote').on('click', quoteClick); function quoteClick(event) { var parent = $(event.target).closest('li'); if (parent.length) { var date = parent.find('.date').text(); var message = parent.find('.flexbox-message').text(); console.log(date); console.log(message); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <div class="flexbox-container"> <div class="flexbox-date"> <div class="topic-header"> <div class="date-item"> <div style="display:flex; "> <div style="align-self: center;" class="date"> 7/31/2009 12:00:00 AM </div> <div style="align-self: center;"> <a class="btn btn-light btn-sm quote">Quote</a> </div> </div> </div> </div> </div> <div class="flexbox-message"> PostNumber 751883 </div> </div> </li> <li> <div class="flexbox-container"> <div class="flexbox-date"> <div class="topic-header"> <div class="date-item"> <div style="display:flex;"> <div style="align-self: center;" class="date"> 7/22/2009 12:00:00 AM </div> <div style="align-self: center;"> <a class="btn btn-light btn-sm quote">Quote</a> </div> </div> </div> </div> </div> <div class="flexbox-message"> PostNumber 743123 </div> </div> </li> </ul>