Question

我在html页面上多次出现以下代码（文本值不同）：

<div>
 <a href="1.html">
  <span class="e">
   <span class="1">stuff1</span>
   <span class="2">stuff2</span>
   <span class="3">stuff3</span>
  </span>
 </a>
 <a class="click" href="2.html">link</a>
</div>

我想要做的是点击链接“链接”，产生一个包含stuff1，stuff2和stuff3值的对话框。我实际上没有达到跨度的值。实际上，我想要的是获取$（this）并获得它的sibbling唯一跨越孩子的跨栏儿童的文本。

谢谢！ -Mala

Answer 1

我在弄清楚你的意思时遇到了一些麻烦，但也许就是这样：

$('.click').click(function() {
  // using our parent as a base, look for any class='e' element, and get its children.
  var $collection = $('.e > *', $(this).parent());
  var text = [];
  $collection.each(function() { 
    // add the text within each span to an array
    text.push($(this).text()); 
  });

  // show the text of the spans as a comma separated list
  alert(text.join(', '));


});

jQuery对象上的.text（）函数将返回span（或任何其他元素）内的文本。

对评论的回应：

$('.e span', $(this).parent())也可以正常工作，.e > *会选择class='e'元素的所有DIRECT子元素。 $函数的第二个参数作为范围;它只在该基本元素下找到元素。

也可以写成$(this).parent().find('span span')。只搜索“span”的危险在于它也会匹配外跨度 - 外跨区$('.e', $(this).parent()).text()会将所有3个元素的文本一起返回 - 这实际上可能是你想要的。

Answer 2

$(this).prev().children(".e").get(0).children()

将为您提供前兄弟姐妹第一个“e”级孩子的所有孩子。

你也可以在没有jQuery的情况下做到这一点，但它有点丑陋;如果您对您感兴趣的节点有引用，那么您正在寻找它的.previousSibling.getElementsByTagName('span')[0].childNodes - 这是一个数组。

无法在jQuery中导航DOM

2 个答案: