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

$("#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+"')");お知らせ文字列と変数を連結する必要があります。以下は:)動作するはずです：あなたはリテラルテキスト「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()の必要はありません。