使用 JQuery 单击 li 时如何获取内部元素的值

Question

这是我的 li 元素。 使用 jquery 单击 li 元素时，我只想获取 class 'preview' 的值。

<li class="contact">
    <div class="wrap">
        <span class="contact-status online"></span>
        <img src="" alt="" width="45px" height="45px" />
        <div class="meta">
            <p class="name">John</p>
            <p class="preview">john@gmail.com</p>
        </div>
    </div>
</li>

Output 应该是：john@gmail.com

我尝试了以下代码：

$('li.contact').on("click", function(e) {
    e.preventDefault();
    var data = $('.preview').val($(this).text());
})

我将整个 li 项目单击事件列表作为 output。

请帮助解决这个问题。 谢谢。

Answer 1

您希望将单击事件处理程序附加到每个列表节点，然后有几种方法可以找到子节点文本值，一种方法是使用 event.target 来访问单击的列表节点，或者我的方法是如以下示例所示，遍历列表节点集合。

 const theLinkContains = email => document.querySelector('h2 span').textContent = email; (() => { document.querySelectorAll('li.contact').forEach(link => { link.addEventListener('click', () => { theLinkContains(link.querySelector('.preview').textContent); }); }); })();

 ul { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; } li { position: relative; display: block; padding-left: 5px; margin-bottom: -1px; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, .125); }.preview { display: none; }

 <h2>Result: <span></span></h2> <ul> <li class="contact"> <div class="wrap"> <span class="contact-status online"></span> <img src="" alt="" width="45px" height="45px" /> <div class="meta"> <p class="name">John</p> <p class="preview">john@gmail.com</p> </div> </div> </li> <li class="contact"> <div class="wrap"> <span class="contact-status online"></span> <img src="" alt="" width="45px" height="45px" /> <div class="meta"> <p class="name">Bob</p> <p class="preview">Bob@gmail.com</p> </div> </div> </li> </ul>

Answer 2

您的代码中的问题是使用.val()在这里是错误的，您需要的是 select <li>标记，然后执行.find()以获取子.preview然后使用 .preview 获取其文本。 text()这是您的代码中应该包含的内容：

 $('li.contact').on("click", function(e) { e.preventDefault(); var data = $(this).find('.preview').text(); console.log(data); })

 <li class="contact"> <div class="wrap"> <span class="contact-status online"></span> <img src="" alt="" width="45px" height="45px" /> <div class="meta"> <p class="name">John</p> <p class="preview">john@gmail.com</p> </div> </div> </li> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>