如何找到与 jquery 同名的正确 <h1> ？ [复制]

Question

如果标题等于以下变量，我正在尝试制作一个 chrome 扩展来操纵网站按下链接：

var wantedItem = "exempel 4";

if ($("h1") == wantedItem) {
    $("a")[0].click();
  } else {
    *tries the next one*
 }

但问题是我尝试执行此操作的网站没有命名不同的 h1，它看起来像这样：

<h1><a class="name-link" href="">exempel 1</a></h1>
<h1><a class="name-link" href="">exempel 2</a></h1>
<h1><a class="name-link" href="">exempel 3</a></h1>
<h1><a class="name-link" href="">exempel 4</a></h1>
<h1><a class="name-link" href="">exempel 5</a></h1>
<h1><a class="name-link" href="">exempel 6</a></h1>
<h1><a class="name-link" href="">exempel 7</a></h1>
<h1><a class="name-link" href="">exempel 8</a></h1>
<h1><a class="name-link" href="">exempel 9</a></h1>

当有更多同名变量时，我如何检查我的变量是否等于 h1？

希望任何人都可以帮助并理解我写的内容

Answer 1

var wantedItem = "exempel 4";

const link = [...document.querySelectorAll(".name-link")]
 .find( el => el.innerHTML === wantedItem );

if( link ) link.click();

只需找到具有该特定内容的元素，然后单击该元素（或执行其他操作）。

Answer 2

试试这样的

var WantItem = "exempel 4";

if ($("h1").text() == wantedItem) {
    $(this).find("a")[0].click();
  } else {
    *tries the next one*
 }

Answer 3

您可以使用:contains() 选择器来实现：

var wantedItem = "exempel 4";
$('h1:Contains("' + wantedItem + '") a')[0].click();

// just for this demo:
$('h1 a').click(function(e) {
  console.log($(this).text());
});

var wantedItem = "exempel 4";
$('h1:Contains("' + wantedItem + '") a').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a class="name-link" href="">exempel 1</a></h1>
<h1><a class="name-link" href="">exempel 2</a></h1>
<h1><a class="name-link" href="">exempel 3</a></h1>
<h1><a class="name-link" href="">exempel 4</a></h1>
<h1><a class="name-link" href="">exempel 5</a></h1>
<h1><a class="name-link" href="">exempel 6</a></h1>
<h1><a class="name-link" href="">exempel 7</a></h1>
<h1><a class="name-link" href="">exempel 8</a></h1>
<h1><a class="name-link" href="">exempel 9</a></h1>

Answer 4

使用:contains():

var wantedItem = "exempel 4";

var theH1 = $('h1:contains(' + wantedItem + ')');
theH1.find('a').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a class="name-link" href="">exempel 1</a></h1>
<h1><a class="name-link" href="">exempel 2</a></h1>
<h1><a class="name-link" href="">exempel 3</a></h1>
<h1><a class="name-link" href="">exempel 4</a></h1>
<h1><a class="name-link" href="">exempel 5</a></h1>
<h1><a class="name-link" href="">exempel 6</a></h1>
<h1><a class="name-link" href="">exempel 7</a></h1>
<h1><a class="name-link" href="">exempel 8</a></h1>
<h1><a class="name-link" href="">exempel 9</a></h1>

Answer 5

var wantedItem = "exempel 4";

if ($("h1") == wantedItem) {
    $("a")[0].click();
} else {
*tries the next one*
}

$("h1") 实际上会返回一个对象，您试图将其与字符串值匹配。您实际需要做的是访问 innerHTML 并将其与相应的字符串匹配。为此，jquery 为您提供了 .text 函数。您需要做的第二件事是遍历所有元素以找到您的匹配项，jquery 为您提供了相同的 .each 函数。

var wantedItem = "exempel 4";

$( "h1 > a" ).each(function( index ) {
     if($( this ).text() == wantedItem){
       //perform click here.
       $( this )[0].click();
     }
 });