Question

I have a an html list , and I try to find a span element in the list with a text equal to ‘cat’

<div id= "target_language_tag_list">
<ul class="target-tag-list">
    <li><span id="tag_18" class="myTag">éléphant</span></li>
    <li><span id="tag_31" class="myTag">box</span></li>
    <li><span id="tag_29" class="myTag">cat</span></li>
    <li><span id="tag_30" class="myTag">pig</span></li>
    <li><span id="tag_32" class="myTag">flower</span></li>
</ul>

I wrote the following js.coffee script , but I get an ‘undefined’ answer

translatedTag = $('input#tag_translated_name').val()  # cat
targetList = $('#target-tag-list')
found = targetList.find("span:contains(" + translatedTagName + ")")
alert 'found: ' + found.attr('id')  # should be tag_29 but is undefined

I also try a direct test , same undefined error

found = $("#tags.tab-pane.active #target-tag-list li span:contains('cat')")
alert 'found: ' + found.attr('id')  # should be tag_29 but is undefined

I guess something is wrong in my contains filter usage , … but what’s wrong ?

Answer 1

Your UL doesnt have an id but a class.

Therefore no element matches #target-tag-list.
Try searching for a class with .target-tag-list instead.