Как я могу выбрать элемент, который имеет определенное значение для «сокр» атрибута с 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» который находится внутри td, который имеет атрибут '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(); 

Демо: Fiddle

• text()
• contents()
• filter()
• nodeType

Answer 2

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

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

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

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

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

Теперь, когда вы хотите получить только текст «текст вне DIV», который обычный текст без завернутых в любом теге вы должны использовать .contetns(). фильтр() функции и получить где

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/