使用jquery，我怎樣才能引用這個跨度對象？

我有以下的html：使用jquery，我怎樣才能引用這個跨度對象？

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

，我無法弄清楚如何從一個click事件引用「statusHeading」跨度對「CancelStreamButton」

我曾嘗試：

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

但似乎沒有工作

我有多個類的statusHeading元素，所以我需要確保我只提到這一個

來源

2014-01-29 leora

以下是如何定位它。

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

JSFIDDLE DEMO

因此，在按鈕的點擊事件，這將是

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

JSFIDDLE DEMO 2

但同樣因爲你有一個類，假設沒有重複相同類別跨越，你可以直接使用$('span.statusHeading')

來源

2014-01-29 20:55:50 Krishna

我更新，以驗證我確實有多個statusHeadings，我只想引用這一項那麼不能只使用第二個選項在你的答案的問題 – leora

@leora - 好吧..其他人工作？ – Krishna

你也可以使用id爲出發點：

$('#enterStreamName + .statusHeading')

來源

2014-01-29 20:59:58 RyanS

但狀態標題不在enterStreamName下？ – leora

@leora +符號是相鄰兄弟的CSS選擇器，所以jQuery將把它解釋爲一個具有類「statusHeading」的元素的選擇器，緊跟在id爲「enterStreamName」的元素之後。 – duncmc

-1

既然你更新問題在這裏是我更新的答案。我將假設添加一個ID不是您嘗試訪問的span標記的選項。相反，您可以遍歷span標籤的索引。使用jQuery的遍歷函數eq()你應該能夠定位其中的任何一個，這與span標記之間的內容無關。

$('.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/

來源

2014-01-29 21:05:50 Jeff

看到更新的questoin。我有多個與statusHeading項目，我需要參考這一個。 – leora

然後只需將一個'ID'添加到span標籤。如果這不是一個選項，那麼你將不得不遍歷DOM。 – Jeff

使用jquery，我怎樣才能引用這個跨度對象？

回答

相關問題