Как читать только строки и игнорировать другой элемент в JQuery
У меня есть следующий элемент 'td'element, и я хочу прочитать часть строки (ячейка 1) ТОЛЬКО без части'span', как я могу это сделать в jQuery?
<td class="myTable">cell 1<span class='end'> </span></td>
Благодарю.
3 ответа
Вот общее решение, которое сделает это без мерзкого гадости RegExp:-)
var text = $('.myTable').clone()
.children()
.detach()
.end()
.text();
Изменить 1:
В качестве альтернативы, если вы уверены, что <span>
всегда будет включать только какой-то символ пробела - вы можете использовать .text()
с последующим .trim()
, вот так:
$.trim( $('.myTable').text() );
Изменить 2:
Просто чтобы поиграть еще, вот еще один пример универсального решения, которое не требует большого количества jQuery, и поэтому намного более эффективно. Представляю офигенно .readStringOnly()
плагин:
$.fn.readStringOnly = function () {
var nodes = this[0].childNodes,
text = '';
for (var i=0, item; (item = nodes[i]); i++) {
if ( item.nodeType == 3 ) { // text node!
text += item.nodeValue;
}
}
return text;
};
// Usage:
// var text = $('.myTable').readStringOnly();
По сути, это то, что делает первое решение в чистых методах jQuery, но поскольку jQuery не обеспечивает поддержки обработки текстовых узлов, у него есть два довольно плохих варианта: неэффективный код jQuery или громоздкая бесполезность W3C-DOM. (так же хорошо, как я сделал плагин из него.)
...
Опять же, вы всегда можете просто использовать регулярное выражение, как уже было предложено кем-то.:-)
$(".myTable").html().replace(/<span.*<\/span>/gi, "")
Пример здесь: http://fiddle.jshell.net/TSYQJ/
var tableContents = $(".myTable").text();
Только что проверил, и это работает. Пример страницы:
<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert($(".myTable").text());
});
</script>
</head>
<body>
<table>
<tr>
<td class="myTable">cell 1<span class='end'> </span></td>
</tr>
</table>
</body>
</html>