Как я могу выбрать элемент, который имеет конкретное значение для атрибута 'abbr' с помощью jquery

Question

Часть моего HTML это:

<tr id="row">
  <td abbr='selectme'>
    <div>Texti inside the div</div>
    Text outside the div
  </td>

  <td>
    any others I dont care about
  <td>
</tr>

И я пытаюсь выбрать "Текст вне div", который находится внутри тд, который имеет атрибут "selectme". Как я могу сделать это с помощью jquery?

Я пытался так:

$("#row").find("[abbr='selectme']").text() 

но это ничего не возвращает.

Answer 1

.text() также возвращает текстовое содержимое элементов-потомков, отфильтровывает их

var text = $("#row").find("[abbr='selectme']").contents().filter(function () {
    //select only text nodes of the targetted td element
    return this.nodeType == 3
}).text();

Демо: скрипка

• текст()
• содержание ()
• фильтр()
• NODETYPE

Answer 2

Вы можете просто искать элемент по имени attr:

$("[abbr='selectme']").text();

Answer 3

Причина, по которой вы ничего не получаете взамен, - вероятно, потому что вы должны обернуть это в

$( document ).ready(function() {}); or $(function(){});

Поскольку div необходимо загрузить в DOM, прежде чем вы достигнете его через jquery, в противном случае вы обращаетесь к элементу, который еще не загружен. Итак, используя этот код:

$(function () {
        alert($("#row").find("[abbr='selectme']").text());
});

Вы получите следующий текст: Текст внутри div Текст вне div

Теперь, когда вы хотите получить только текст "текст вне div", который представляет собой простой текст без каких-либо тегов, вы должны использовать функцию.contetns(). Filter() и получить, где

nodeType === 3

числовое значение "3" используется для получения текстовых узлов. так что ваш окончательный код будет выглядеть так (я использую оповещение для иллюстрации)

 // Shorthand for $( document ).ready()
    $(function () {
        // getting the specific text and saving into a variable
        //getting the contents of the target element
        var myText = $("#row").find("[abbr='selectme']").contents()
        // using the filter to get the text node
            .filter(function () {
                return this.nodeType === 3;
            //getting the final text
            }).text();
        alert(myText);
    });

Теперь, когда вы запустите программу, вы получите вывод "Текст вне div".

Вот рабочий пример http://jsfiddle.net/842nn/