Question

我有以下html：

  <span id="enterStreamName" style="display:none">
       <input type="text" id='Stream' class="fullRowTextBox" value="" name="Stream" />
       <button class="SaveStreamButton">Save</button>&nbsp;&nbsp;&nbsp;
       <button class="CancelStreamButton">Cancel</button>
  </span>

  <span class="statusHeading"></span>

我无法弄清楚如何从“CancelStreamButton”上的点击事件引用“statusHeading”范围

我试过了：

 .find(), .next(), siblings()

但似乎没有工作

我有多个带有statusHeading类的元素，所以我需要确保我只引用这个

Answer 1

以下是如何定位它。

$('.CancelStreamButton').parent().next();

的 JSFIDDLE DEMO 的

因此，在按钮的点击事件中，它将是

$(this).parent().next();

<强> JSFIDDLE DEMO 2

但是，因为你有一个类假设没有同一个类的重复跨度，你可以直接使用$('span.statusHeading')

Answer 2

你也可以使用id作为起点：

$('#enterStreamName + .statusHeading')

Answer 3

由于您在此更新了问题，因此我更新了答案。我将假设添加ID不是您尝试访问的span标记的选项。相反，您可以遍历span标记的索引。无论span标记之间的内容是什么，通过使用jQuery的eq()遍历函数，您应该能够针对它们中的任何一个。

$('.CancelStreamButton').on('click', function(event){
   //eq traverses the index of the span tags
   $('.statusHeading').eq(1).css('border','1px solid red');
});

更新了小提琴 - http://jsfiddle.net/CM3s3/1/

使用jquery，我如何引用此span对象？

3 个答案: