如何只选择顶部元素文本？

i have this html:

我有这个HTML:

<span class="price">
        $61.00
          <span class="detailFreeShipping">With Free Shipping</span>
    </span>

How to write a jquery selector which give me the price text only "$61.00"?

如何编写一个jquery选择器,只给我价格文本“$ 61.00”?

i want to make it generic as i can because may be in some cases there is no inner span, just the parent one.

我想让它尽可能通用,因为在某些情况下可能没有内部跨度,只有父内部。

3 个解决方案

#1

You can do this:

你可以这样做:

jQuery.fn.extend({
    textOnly: function() {
        // make a clone of this object so we are not changing the actual DOM
        var obj = $(this).clone();

        // remove all the children, i.e. any DOM objects
        obj.children().remove();

        // get the text value after all DOM elements are removed
        return obj.text();
    }
});

then you can call it like this

然后你就可以这样称呼它

var price = $(".price").textOnly();

you will get the value you want.

你会得到你想要的价值。

#2

I don't know jQuery, but just to pseudo-respond your question, you can do this by:

我不知道jQuery,但只是伪回复你的问题,你可以这样做:

var elem = document.getElementById('yourid'); // or document.getElementsByTagName('span')[0];
var text = elem.innerHTML;
text = text.substr(0, (text.indexOf('<') > -1 ? text.indexOf('<') : text.length));

#3

an attempt:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" charset="utf-8">
        google.load("jquery", "1.3");
    </script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            var white_out = $("span[class=price] :first-child").text();
            var all = $("span[class=price]").text();
            var price = all.replace(white_out, "");
            alert(price);
        });
    </script>
</head>
<body>
    <span class="price">
            $61.00
              <span class="detailFreeShipping">With Free Shipping</span>
        </span>
</body>
</html>

where the lines:

线条在哪里:

            var white_out = $("span[class=price] :first-child").text();
            var all = $("span[class=price]").text();
            var price = all.replace(white_out, "");

might do the work, for a single element.

对于单个元素,可能会做这项工作。

#1