Question

这很简单，但我得到了预期的结果。我想迭代一组段元素并使用.each()函数获取其文本节点，尽管我获得了整个文档文本节点。

这是代码

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	<body>
		<main>
			<p>Kon</p>
			<p>Mule</p>
		</main>
		<p>Hello riko</p>
		<h2 hidden data-modal-target=".modal-progress">Header 2</h2>
	</body>
	<script type="text/javascript">
		$(function () {
			// console.log($("p"))
			$("p").each((index)=> {
				console.log( $( this ).text())
				// console.log(index)
			})
		})
	</script>
</html>

＆＃13;

而不是得到：

昆

骡

你好Riko

我明白了：

            Kon
            Mule

        Hello riko
        Header 2


        $(function () {
            // console.log($("p"))
            $("p").each((index)=> {
                console.log( $( this ).text() + index)
                // console.log(index)
            })
        })

三次。

我哪里错了？

Answer 1

arrow functions无法访问

this。您需要使用常规函数来执行此操作：

＆＃13;

$("p").each(function(index) {
  console.log($(this).text())
  // console.log(index)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <p>Kon</p>
  <p>Mule</p>
</main>
<p>Hello riko</p>
<h2 hidden data-modal-target=".modal-progress">Header 2</h2>

＆＃13;

或者您需要使用get()从jQuery集合中获取本机JS数组并在其上使用forEach()：

$("p").get().forEach((item) => {
  console.log($(item).text())
})

Answer 2

根据代码，您正在做的一切都是正确的。你的环境有问题。这是工作代码 https://jsfiddle.net/RanjeetKumarGautam/w6ojokp1/

$(function () {
            // console.log($("p"))
            $("p").each((index)=> {
                console.log( $( this ).text())
                // console.log(index)
            })
        })

无法获取上下文元素文本

2 个答案: