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

Question

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

这个问题的演示在这个 URL: demo code

问题 : 这两种方法中正确的选择器应该是什么，所以它们分别是 return 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

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

想法是得到 parent div 的 class 和 pn 的跨度，然后只得到它下面的所有类型的节点，即从下一层仅 parent，这是通过 contents() 方法完成的（而不是 children() 方法，因为 children 将忽略文本节点）。这将为我们提供两个元素 - span 和 span 元素之后的文本，因为这两个是 parent div 中唯一的 immediate children。文本节点将是我们正在寻找的产品的名称。

在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>

Answer 1

$(function() {
  
  $('#out0').on('click', function(e) {

    
    getFirstProduct();
  });


  $('#out1').click(function(e) {

    
    getSecondProduct();
  });

  function getFirstProduct() {
    $("#p0 span.pn").text('');
    var txt0 = $("#p0 span.pn").parent().text();
    $('#out0').text(txt0);
  }

  function getSecondProduct() {
    $('#p1 span.pn').text('');
    var txt1 = $("#p1 span.pn").parent().text();
    $('#out1').text(txt1);
  }

});

<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 id="out0">Get First Product</button>
<button id="out1">Get Second Product</button>

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

Trying to find text next to a span using jquery selector

javascript

jquery

jquery-selectors