Select 并获取与页面上其他元素具有相同 class 的跨度内容

Question

我正在尝试做一些看似简单的事情，但结果比我想象的要难。

我在第 4 页上有跨度元素（我无法控制），所有元素都具有相同的 class ID (BOfSxb)，我只需要编辑其中两个 - 第二个和第四个元素。所以我不确定如何 select 只有这两个，在我这样做之前，我需要知道第二个或第四个跨度元素的内容（2 和 4 具有相同的内容）。我想出了如何获取内容，但我将两者结合起来，所以如果内容是 2,304,400，我将返回 2,304,4002,304,400

到目前为止，我是这样获取内容的：

var spanContent = $("span.BOfSxb:contains(2,304,400)").text()

console.log(spanContent); //returns 2,304,4002,304,400 ( I need 2,304,400)

上面的另一个问题是 ：包含 有一个我无法提前知道的数字。

在我从第二个或第四个跨度中获取内容后，我需要比较它并查看它属于哪个范围，然后用它做一些其他事情。类似于：

if ($(".BOfSxb:contains("+ spanContent + ")").text() >= 0 && $(".BOfSxb:contains("+ spanContent + ")").text() <= 1000) {

$("span.BOfSxb:contains("+ spanContent + ")").replaceWith(finalDiv);

} else if ($(".BOfSxb:contains("+ spanContent + ")").text() >= 1001 && $(".BOfSxb:contains("+ spanContent + ")").text() <= 1000000) {

$("span.BOfSxb:contains("+ spanContent + ")").replaceWith(finalDiv2);

} else {

//something else
}

编辑：我应该补充一点，这实际上是一个 Chrome 扩展，它将对我无法控制的页面上的跨度元素进行编辑。

感谢您的帮助！

Answer 1

您可以使用 :nth-of-type 选择器。它可能不会在旧浏览器中工作。

https://css-tricks.com/almanac/selectors/n/nth-of-type/

Answer 2

如果我理解你的问题，这应该有效：

HTML:

<span class="span">1234</span>
<span class="span">Other content 1</span>
<span class="span">1234</span>
<span class="span">Other content 2</span>

JavaScript（使用jQuery）：

var content = '1234';
// Notice:
// (i) content is a string. You should use quotes if you 
// directly write the value, as specified here: https://api.jquery.com/contains-selector/
// (ii) Using classes to select objects with jQuery will return an array of elements
var spans = $('.span:contains(' + content + ')');

spans.each(function(i){
    var value = parseInt($(this).text());
    if(value > 0 && value < 1000){
        console.log(value);
    }
});

工作 JsFiddle：http://jsfiddle.net/3tbag1qs/2/

更新：正如@zfrisch 所建议的，您还可以通过它们的位置获得跨度。如果您不确定确切的顺序，此处提供的解决方案是解决您问题的另一种方法。

Answer 3

您可以通过使用与 class 相关的索引号来指定要抓取的元素。您可以使用 jquery .eq() 方法执行此操作。

$(".span.BOfSxb").eq(1).text();
$(".span.BOfSxb").eq(3).text();

然后您可以使用 parseInt(); 方法将它们更改为数字并根据需要添加它们。 parseInt() 方法 returns 来自字符串的整数。当您从元素中获取文本时，它们无法相加，因为它们不被视为数字，而是被视为文本字符串。

这是 fiddle：http://jsfiddle.net/atw5z0ch/

Select 并获取与页面上其他元素具有相同 class 的跨度内容

Select and get contents of a span with same class as other elements on page

html

javascript

jquery

google-chrome-extension