Question

这是我的示例表结构，

<tr height=20>
    <td>Apple</td>
    <td>Brand A</td>
    <td>1000</td>
</tr>
<tr height=20>
    <td>Apple</td>
    <td>Brand B</td>
    <td>2000</td>
</tr>
<tr height=20>
    <td>Apple</td>
    <td>Brand C</td>
    <td>3000</td>
</tr>
<tr height=20>
    <td>Apple</td>
    <td>Brand D</td>
    <td>4000</td>
</tr>

如果我使用

const name = $("td:contains('Apple')").first();
console.log(name.next().next().text());

我将日志记录为1000，但我需要将具有下一个 td 标记的元素作为＆＃34; 品牌C ＆＃34;并记录下一个值 3000

Answer 1

使用

const name = $("td:contains('Apple')").last();

当您搜索td:contains...时，它将检索与该选择器匹配的所有DOM元素，并且您有三个，因此它按照外观顺序检索它们（从上到下，从左到右阅读）。因此，first可以为您提供第一行中的那个，而不是第三行。

Answer 2

与所有jQuery集合一样，您也可以使用其索引或使用负索引

从最后开始向后工作

也可以对它们使用filter()，例如找到具有特定值的兄弟姐妹

let $cells = $("td:contains('Apple')");
console.log('Found ', $cells.length, ' matches');

// change firt one background
$cells.eq(0).css('background','lightgrey');

// get number from row of second one
console.log('Second # =', $cells.eq(1).siblings().last().text())

// target second last
$cells.eq(-2).css('background','yellow');

// use filter
$cells.filter(function(){
   return $(this).next().is(":contains('Brand C')")
}).css('background', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr height=20>
    <td>Apple</td>
    <td>Brand A</td>
    <td>1000</td>
  </tr>
  <tr height=20>
    <td>Apple</td>
    <td>Brand B</td>
    <td>2000</td>
  </tr>
  <tr height=20>
    <td>Apple</td>
    <td>Brand C</td>
    <td>3000</td>
  </tr>
</table>

Answer 3

您可以使用解决方案

＆＃13;

const apple = $("td:contains('Apple')");
$(apple).each(function(){
 if($(this).next().text() === "Brand C") {
  console.log($(this).next().next().text());
 }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr height=20>
    <td>Apple</td>
    <td>Brand A</td>
    <td>1000</td>
</tr>
<tr height=20>
    <td>Apple</td>
    <td>Brand B</td>
    <td>2000</td>
</tr>
<tr height=20>
    <td>Apple</td>
    <td>Brand C</td>
    <td>3000</td>
</tr>
</table>

＆＃13;

希望这会对你有所帮助。

Jquery：检查下一个元素是否包含特定文本

3 个答案: