Question

我有一个看起来像这样的div：

<td id="monday">
<p class="outter">whatever here</p>
<p class="hidden" style="display:none">Some content I want to get</p>
</td>

现在问题是 - td id会改变（这只是其中之一）。

所以我尝试做的是，当用户点击.outter（它总是被称为outter）时，我想找到td id，然后才能访问p类（永远是＆＃39;隐藏＆＃39;）。

所以我试过这个（document.body是为了解决我遇到的动态加载问题）：

$(document.body).on('click', '.outter', function() {
        var info = $(this).parent("td").$(".hidden").text();
        $("#rightBox").css("width", "200px");
        $("#rightBox").css("background", "#f0f0f0");
        $("#rightBox").empty();
        $("#rightBox").append(info);
    });

我遇到的问题是在第一行，获取变量。我想说这个特别的.outter类，找到它的父级，然后在其中找到隐藏的类。然后获取该隐藏类中的文本。然后取出该变量并将其转储到#rightBox;

有人可以帮忙吗？

Answer 1

第var info = $(this).parent("td").$(".hidden").text();行会引发错误，你应该使用find或children方法，因为目标元素是被点击元素的下一个直接兄弟，你可以使用{{1方法，您不需要父元素的ID。

next

请注意，您还可以创建一个类并使用$(document.body).on('click', '.outter', function() { // var info = $(this).closest('td').find('.hidden').text(); var info = $(this).next('.hidden').text(); $("#rightBox").css({"width": "200px", "background": "#f0f0f0"}) .html(info); });方法而不是addClass方法，这会让您的代码更清晰。

Answer 2

你可以这样做：

$(document.body).on('click', '.outter', function() {
    var info = $(this).next().text();
    $("#rightBox").css("width", "200px");
    $("#rightBox").css("background", "#f0f0f0");
    $("#rightBox").empty();
    $("#rightBox").append(info);
});

演示：http://jsfiddle.net/eMzcx/

获取单击元素的div父元素，以便在同一个div中获取p类

2 个答案: