个人中心
gpt4 book ai didi

javascript - 尝试使用 jquery 选择器查找跨度旁边的文本

转载 作者：行者123 更新时间：2023-11-30 00:16:36 24 4
gpt4 key购买 nike

<分区>

我的网页中有以下代码。我需要找到在类为 pn 的跨度之后出现的产品名称。当我运行下面的代码时，我从 getFirstProduct 方法中得到空字符串，并且从 getSecondProduct 方法中得到一个空字符串。但是，如果我使用以下表达式，则会得到正确的产品名称:$("#p0 span.pn")[0].nextSibling.data 或 $("#p1 span. pn")[0].nextSibling.data 但这是使用 JavaScript，我想知道是否有纯 jquery 解决方案。

此问题的演示位于此 URL:demo code

问题:这两种方法中正确的选择器应该是什么，以便它们分别返回 Product 0 和 Product 1？

查找产品名称的代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='p0'>
     <div>some content</div>
     <div></div>
     <div><span class='t pn'>Product : </span>Product 0</div>
     <div></div>
     <div>some content</div>
     <div>some content</div>
    </div>
    <div id='p1'>
     <div>some content</div>
     <div></div>
     <div><span class='t pn'>Product : </span>Product 1</div>
     <div></div>
     <div>some content</div>
     <div>some content</div>
</div>
<button type="button" onclick="var x =  getFirstProduct(); alert(x);">Get First Product</button>
<button type="button" onclick="var x =  getSecondProduct(); alert(x);">Get Second Product</button>

<script>
function getFirstProduct() {
    return $("#p0  span.pn").next().text();
}

function getSecondProduct() {
   return $("#p1  span.pn").next().text();
}
</script>

更新 1

根据给出的答案以及其重复项被标记为的帖子，我想出了以下完美运行的代码。解决方案的演示代码位于此 URL:solution code demo .

想法是获取类为 pn 的 span 的父 div，然后仅获取其下的所有类型的节点，即仅从父级向下一级，这由 contents 完成() 方法(而不是 children() 方法，因为 child 会忽略文本节点)。这将为我们提供两个元素 - span 和 span 元素之后的文本，因为这两个元素是父 div 的唯一直接子元素。文本节点将是我们正在寻找的产品的名称。

在 jquery 中查找文本节点时，似乎总是需要 contents() 方法。

有效的代码

<div id='p0'>
     <div>some content</div>
     <div></div>
     <div><span class='t pn'>Product : </span>Product 0</div>
     <div></div>
     <div>some content</div>
     <div>some content</div>
    </div>
    <div id='p1'>
     <div>some content</div>
     <div></div>
     <div><span class='t pn'>Product : </span>Product 1</div>
     <div></div>
     <div>some content</div>
     <div>some content</div>
</div>
<button type="button" onclick="var x =  getFirstProduct(); alert(x);">Get First Product</button>
<button type="button" onclick="var x =  getSecondProduct(); alert(x);">Get Second Product</button>

<script>
function getFirstProduct() {
 return $("#p0  span.pn").parent().contents().filter(function(index) { return this.nodeType === 3 ;}).text();
}

function getSecondProduct() {
   return $("#p1  span.pn").parent().contents().filter(function(index) { return this.nodeType === 3 ;}).text();
}
</script>

24 4 0
文章推荐： javascript - PHP 实时搜索不显示结果
文章推荐： android - 使用 MediaPlayer 播放音频不流畅？
文章推荐： android - 用于列表项更新的 ListView 适配器 onClickListener
文章推荐： mysql - Openldap backsql 将用户添加到带有 groupofNames 的组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com