jQuery / Javascript查找具有自定義屬性的最接近范圍並更改內部html

Question

使用JQuery和/或Javascript，我該怎么做-

我需要找到具有等於某個值的自定義屬性的<span> 。 然后，我需要將內部<span>設置為等於某些文本。

示例：在下面的html中，我需要使用屬性data-my-custom-attribute == Value1查找跨度，並在內部跨度中填充一些文本。

<span data-my-custom-attribute="Value1" >
    <span>  /**put text here***/  </span>
</span>

<span data-my-custom-attribute="Value2" >
    <span>  /**leave empty***/  </span>
</span>

Answer 1

如果div始終是該屬性的span的同級兄弟，則可以使用此屬性。

$('#MyDiv').nextAll('[data-my-custom-attribute="ValueX"]:first').find('span').text('something');

---

編輯后

我想您只需要：

$('[data-my-custom-attribute="Value1"] span').text('something');

Answer 2

使用CSS兄弟姐妹選擇器~

$('#MyDiv ~ [data-my-custom-attribute="Value1"] > span').text('BOOH!')

編輯用於選擇內部跨度

Answer 3

$('#MyDiv').siblings('span[data-my-custom-attribute]:first > span').text("text goes here");

Answer 4

根據您原來的問題（和更新的問題），以下兩種方法都可以找到span ：

// works because your custom attribute is a data attribute
$('span').filter(function (i) {
    return $(this).data('my-custom-attribute') === 'Value1';
}).children('span').text('yay! new text');

// works regardless of what the custom attribute is
$('span[data-my-custom-attribute="Value1"]').children('span').text('yay! new text');
// or
$('span[my-custom-non-standardized-html-attribute="Value1"]').children('span').text('yay! new text');

這是一個小提琴演示： http : //jsfiddle.net/ucq94/