Question

我有类似的东西：

<a class="feature category">
            <div class="feature-txt left">
                <p id="first">innerHTML</p>
            </div>
            <div class="feature-go left center">
                <i class="fa fa-angle-right fa-fw"></i>
            </div>
        </a>

点击后我想在p标签内获取文字，但是：

$('.category').on('click', function() {
            alert($(this).find("p").innerHTML);
        });

无效。我怎么能得到它？

Answer 1

$(this).find("p")返回dom元素的jquery对象。你不能直接在它们上使用javascript方法。

1）将对象转换为javascript

$('.category').on('click', function() {
    alert($(this).find("p")[0].innerHTML);
});

2）或使用jquery的.text()或.html()方法

$('.category').on('click', function() {
        alert($(this).find("p").text());
    });

Answer 2

使用下面的代码。使用jquery

的.text（）或.html（）函数

  $('.category').on('click', function() {
        alert($(this).find("p").text());
  });

或

 $('.category').on('click', function() {
        alert($(this).find("p").html());
  });

Answer 3

不起作用，因为div和p不是标记的子节点。

你仍然被误解了。根据您的标记，可以很容易地说div和p是锚点的子节点。

问题是.innerHTML javascript方法，你将这个方法绑定到jQuery对象，而你需要有一个DOM节点来使用它，所以你可以使用[0]后缀将它转换为DOM节点或在jquery中使用.get(0)作为相同的内容。

使用innerHTML

$('.category').on('click', function() {
    alert($(this).find("p")[0].innerHTML);
    alert($(this).find("p").get(0).innerHTML);
});

或另一种方式是使用jQuery的.html(), .text()，它也是这样做的：

$('.category').on('click', function() {
    alert($(this).find("p").html());
    alert($(this).find("p").text());
});

包裹在<a> tag?</a>内的遍历（get）元素

3 个答案: