Question

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

此问题的演示位于以下网址：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

根据给出的答案以及标记为重复的帖子，我想出了以下完美的代码。解决方案的演示代码位于以下网址：solution code demo。

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

在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选择器查找跨度旁边的文本

1 个答案: