jquery - 使用Jquery在按钮单击时遍历div

Question

我有下面的 HTML 并试图在按钮（btnClick）上为特定的 Div 获取文本（主文本和 ChildText）（Div 的数量可能在运行时不同）

<div class="main">
*** Some Main Text ***  <button class="btnClick" type="button"> </button>
<div class="child">
<p> ** Some child Text ** </p>
</div>
</div>
<div class="main">
*** Some Main Text ***  <button class="btnClick" type="button"> </button>
<div class="child">
<p> ** Some child Text ** </p>
</div>
</div>

我尝试过，但不确定我将如何在没有唯一 ID 字段的情况下仅使用类名来做到这一点，并认为应该有一种方法。

谢谢

Answer 1

$('.btnClick').click(function () {
    var mainText = '', childText;

    $(this).parent().contents().filter(function () {
        return this.nodeType == 3;
    }).each(function (i, el) {
        mainText += $(el).text();
    });

    childText = $(this).siblings('.child').text();

    alert(mainText);
    alert(childText);
});

请参阅jsFiddle。

Answer 2

试试这样：

$('.btnClick').click(function(){
        console.log($(this).parent().text().split('\n')[1] + $(this).siblings('.child').text());
});

演示

Answer 3

你可以这样做：

$('.btnClick').click(function () {

    var mainText = $.trim($(this).closest('.main').text().split('\n')[0]);
    console.log('Main Text : ', mainText);

    var childText = $.trim($(this).next('.child').text());    
    console.log('Child Text : ', childText);
});

小提琴演示

Answer 4

您可以使用$(this).parent('div.main').text()获取其中包含的所有文本div.main（这将包括所有后代元素的文本）。

如果要div.main单独获取文本，可以执行以下操作：

var mainText = $(this).parent('div.main').get(0).childNodes[0].nodeValue;

..对于子文本：

var childText = $(this).next('div.child').text();

这是一个小提琴