的jQuery：获取元素的ID包含文本

Question

我尝试以下操作后得到一个元素的ID：

我点击一个链接，并在它那里得到的文本。然后，我想比较该文本以获取包含它的元素。

并获取新找到的元素的ID。

但是，最新的操作返回给我一个未定义的结果，所以你的帮助是受欢迎的。

这里是我的代码：

$("#mybutton").click(function (e){ 
 
    e.preventDefault(); 
 
    var txt = $(e.target).text(); 
 
    var findTxt = $(".list:contains('txt')"); 
 

 
    console.log("findTxt returns : "+ findTxt.attr('id')); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="mybutton">Sample Text</a> 
 
    <span id="idtofind" class="list">Sample Text</span> 
 
    <span id="another" class="list">another</span> 
 
    <span id="andanother" class="list">and another</span>

Answer 1

您正在寻找其中包含文字文本“TXT”的元素 - 你要的是找出其中包含存储在文本元素可变txt

$("#mybutton").click(function (e){ 
 
    e.preventDefault(); 
 
    var txt = $(e.target).text(); 
 
    var findTxt = $(".list:contains('" + txt + "')"); 
 

 
    console.log("findTxt returns : "+ findTxt.attr('id')); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="mybutton">Sample Text</a> 
 
    <span id="idtofind" class="list">Sample Text</span> 
 
    <span id="another" class="list">another</span> 
 
    <span id="andanother" class="list">and another</span>

Answer 2

你传入字符串 'TXT'，而不是传递变量的。

更换$(".list:contains('txt')");与$(".list:contains('" + txt + "')");

像这样：

$("#mybutton").click(function (e){ 
    e.preventDefault(); 
    var txt = $(e.target).text(); 
    var findTxt = $(".list:contains('" + txt + "')"); 
    console.log("findTxt returns : "+ findTxt.attr('id')); 
}); 

Answer 3

$(".list:contains('txt')");应该$(".list:contains('"+txt+"')");通知字符串和变量串联。下面应该工作:)：

$("#mybutton").click(function (e){ 
 
    e.preventDefault(); 
 
    var txt = $(e.target).text(); 
 
    var findTxt = $(".list:contains('"+txt+"')"); 
 

 
    console.log("findTxt returns : "+ findTxt.attr('id')); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="mybutton">Sample Text</a> 
 
    <span id="idtofind" class="list">Sample Text</span> 
 
    <span id="another" class="list">another</span> 
 
    <span id="andanother" class="list">and another</span>

Answer 4

$("#mybutton").click(function(e) { 
 
    e.preventDefault(); 
 
    var txt = $(this).text(); 
 
    var findTxt = $(".list").filter(function() { 
 
    return $(this).text() == txt 
 
    }) 
 
    console.log("findTxt returns : " + findTxt.attr("id")); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="mybutton">Sample Text</a> 
 
<span id="idtofind" class="list">Sample Text</span> 
 
<span id="another" class="list">another</span> 
 
<span id="andanother" class="list">and another</span>

使用.filter()

Answer 5

<a href="#" id="mybutton">Sample Text</a> 
<span id="idtofind" class="list">Sample Text</span> 
<span id="another" class="list">another</span> 
<span id="andanother" class="list">and another</span> 

-

$("#mybutton").click(function (e){ 
    var txt = $(this).text(); 
    var findTxt = $(".list:contains("+txt+")"); 
    console.log("findTxt returns : "+ findTxt.attr('id')); 
}); 

既然你是被点击按钮的范围内，你可以简单地使用this指到按钮。

此外，要获得正确的链接，您需要使用HTML中的href属性。只需使用href="#"，并且也不需要e.preventDefault()。