Jquery: получить идентификатор элемента, который содержит текст

Question

Я пытаюсь получить идентификатор элемента после следующих действий:

я нажимаю на ссылку, и получить текст в нем. Затем я хочу сравнить этот текст, чтобы получить элемент, который содержит его.

И получить идентификатор вновь найденного элемента.

Однако последнее действие возвращает мне неопределенный результат, поэтому ваша помощь приветствуется.

Вот мой код:

$("#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 для обозначения к кнопке.

Кроме того, чтобы иметь правильную ссылку, вам необходимо использовать атрибут href в HTML. Просто используйте href="#", и нет необходимости в e.preventDefault().