Question

我有以下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。

当我使用JQuery / JavaScript点击h3.task-title时，如何获取pre.task-descricao，div.task等信息？

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

Answer 1

您可以在事件处理程序中使用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());
});

Here是一个实例。

Answer 2

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

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

2 个答案: