获取具有多个结构和相同类选择器的html值

Get html values with multiple structure and same class selector

本文关键字：选择器 同类 html 结构 获取      更新时间：2023-09-26

我有以下HTML/JSP结构:

<div class="col-md-12 task task-box">
    <c:if test="${not empty task.titulo}">
        <div class="row">
            <div class="col-md-12">
                <h3 class="task-title">${task.titulo}</h3></div>
        </div>
    </c:if>
    <div class="row">
        <div class="col-md-12">
            <pre class="task-descricao"><c:out value="${task.descricao}"/></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <small class="task-data-criacao">
                <i class="fa fa-calendar-o"></i>&nbsp;${task.dataCriacao}</small>
        </div>
        <c:if test="${not empty task.dataExecucao}">
            <div class="col-md-3">
                <small class="task-execucao"><i
                        class="fa fa-calendar"></i>&nbsp;${task.dataExecucao}</small>
            </div>
        </c:if>
        <c:if test="${not empty task.arquivo}">
            <div class="col-md-3">
                <a href="${task.arquivo}" class="btn btn-link btn-sm">
                    <i class="fa fa-download"></i>
                </a>
            </div>
        </c:if>
        <div class="col-md-3"><a href="#uplaod"><i class="fa fa-dropbox"></i></a></div>

        <div class="row">
            <div class="container">
                <div class="col-md-12">
                    <small class="task-tag"><i class="fa fa-tags"></i>&nbsp;${task.tags}</small>
                </div>
            </div>
        </div>
    </div>
</div>

我将有这样的多个结构，因为我使用<c:forEach>。包装器类task。

我怎么能得到的信息，如，h3.task-title, pre.task-descricao和其他当我点击一个div.task与JQuery/JavaScript?

PS:我使用<c:forEach>将这个结构与不同的内部值相乘。

您可以在事件处理程序中使用this关键字来访问触发事件的元素。一旦您有了这个元素，您就可以使用find函数来查找目标元素中的相关元素。

$('div.task').click(function () {
    var $title = $(this).find('h3.task-title');
    var $descricao = $(this).find('pre.task-descricao');
    //...
    alert($title.text() + ''n' + $descricao.text());
});

使用JQuery:

$( "#taskdiv" ).click(function() {
    var title = $(".task-title").html();
    var descricao = $(".task-descricao").html();
});

关于jquery的信息点击:http://api.jquery.com/click/

关于jquery选择器的信息:http://www.w3schools.com/Jquery/jquery_ref_selectors.asp

相关文章：