计算子节点而不计算文本节点。

时间:2015-05-23 17:11:29

标签: javascript jquery html ajax json

我使用AJAX加载了一些html,但html附带了两个div元素和它们之间的空格,length也计算了文本节点。

如何动态删除元素之间的文本节点或更正length以使其不包含文本节点?

$.ajax({
    method: "POST",
    url: submit_url + "/loadmore.php",
    data: {
        load_type: load_type,
        exclude_ids: exclude_ids,
        offset: offset,
        filters: filters
    }
}).done(function (html) {
    var $html = $(html);
    console.log($html);
    offset += $html.length;
});

AJAX数据示例:

<div id="post-65" class="g-b g-b--1of1 g-b--sm-1of2 g-b--md-1of4 post-65 guests type-guests status-publish has-post-thumbnail hentry hotels-tbilisi">
    <div class="QoutedItem">
        <div class="QoutedItem-content">
            <div class="QoutedItem-overlay"></div>
            <div class="QoutedItem-social">
                <ul class="u-colorGrayLightest lr u-textSize-xs">
                    <li class="u-displayInline u-marginRight-xs">
                        <a href="#" class="Square Square--medium u-borderRounded u-backgroundBlack u-borderWidth-f">
                            <div class="u-posCenter Icon Icon--facebook"></div>
                        </a>
                    </li>
                    <li class="u-displayInline u-marginRight-xs">
                        <a href="#" class="Square Square--medium u-borderRounded u-backgroundBlack u-borderWidth-f">
                            <div class="u-posCenter Icon Icon--twitter"></div>
                        </a>
                    </li>
                    <li class="u-displayInline u-marginRight-xs"></li>
                </ul>
            </div><img src="http://localhost:8000/wp-content/uploads/2015/05/images-3.jpeg" class="QoutedItem-img" /></div>
        <div class="QoutedItem-qoute">
            <div class="QoutedItem-qouteAuthor">Al</div>
            <div class="QoutedItem-qouteText"><p>hey yo</p>
</div>
        </div>
    </div>
</div>

<div id="post-63" class="g-b g-b--1of1 g-b--sm-1of2 g-b--md-1of4 post-63 guests type-guests status-publish has-post-thumbnail hentry hotels-kazbegi">
    <div class="QoutedItem">
        <div class="QoutedItem-content">
            <div class="QoutedItem-overlay"></div>
            <div class="QoutedItem-social">
                <ul class="u-colorGrayLightest lr u-textSize-xs">
                    <li class="u-displayInline u-marginRight-xs">
                        <a href="#" class="Square Square--medium u-borderRounded u-backgroundBlack u-borderWidth-f">
                            <div class="u-posCenter Icon Icon--facebook"></div>
                        </a>
                    </li>
                    <li class="u-displayInline u-marginRight-xs">
                        <a href="#" class="Square Square--medium u-borderRounded u-backgroundBlack u-borderWidth-f">
                            <div class="u-posCenter Icon Icon--twitter"></div>
                        </a>
                    </li>
                    <li class="u-displayInline u-marginRight-xs"></li>
                </ul>
            </div><img src="http://localhost:8000/wp-content/uploads/2015/05/images-2.jpeg" class="QoutedItem-img" /></div>
        <div class="QoutedItem-qoute">
            <div class="QoutedItem-qouteAuthor">Dr. ass</div>
            <div class="QoutedItem-qouteText"><p>yep</p>
</div>
        </div>
    </div>
</div>

enter image description here

3 个答案:

答案 0 :(得分:1)

计算可以按容器过滤的帖子数量

所以如果你的反应就像是

var biggest = Math.max.apply(this, arr);
var biggest = Math.max.apply(null, arr);
var biggest = Math.max.apply("", arr);
var biggest = Math.max.apply(window, arr);
...

console.log(biggest);//all above output 5 why??

您可以使用.change()

<div class="post">HTTP POST request</div>
<div class="post">New England Post</div>

这将从集合中删除不是div元素的所有内容。

答案 1 :(得分:0)

offset += $html.replace(' ', '').length;

答案 2 :(得分:0)

尝试仅计算id以post-开头的div元素。

.done(function(html) {
  var $html = $(html);
  console.log($html);
  offset += $html.filter('[id^="post-"]').length;
}