Question

我的h3标签文字为 Haii 或 rerrrwe

当我尝试捕获h3文本时，它添加一些sattic文本也称为“click to collapse contents”

Haii点击折叠内容

请你知道如何捕捉确切的文字吗？

这是我的程序

var response = {
    "Restaurants": [{
        "RestrntArea": "Haii",
        "cust_loc_id": "374"
    }, {
        "RestrntArea": "rerrrwe",
        "cust_loc_id": "373"
    }]
}
showLabels();

function showLabels() {
    //$("#result").html("");
    var favoriteresultag = '';
    for (var i = 0; i < response.Restaurants.length; i++) {
        var name = response.Restaurants[i].RestrntArea;
        if (name) {
            favoriteresultag += '<div data-role="collapsible" data-inset="false" class="my-collaspible"><h3>' + name + ' <a class="icon-pencil-1 labelEditIcon "></a></h3></div>';
        }
    }
    $("#result").append(favoriteresultag).trigger("create");

}
$(document).ready(function() {
    $('.my-collaspible').bind('expand', function() {
        //alert('Expanded');
        var name = $(this).find('h3').text();

        alert(name);
        console.log(name);


    });
    $('.my-collaspible').bind('collapse', function() {
        //alert('Collapsed');
    });
});

你能告诉我如何解决这个问题吗？

Answer 1

问题是你的元素还有孩子，里面也有文字。定位特定元素，克隆它，抓住子节点，删除它们，结束链条以恢复原始选择器，抓取文本。

var name = $(this).find('h3 .ui-btn-text').clone().children().remove().end().text();

Here's your working jsFiddle

Answer 2

由于h3中有更多子元素也有文字，因此这是您需要的解决方案：

var name = $(this).find('h3 .ui-btn-text').clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()      //again go back to selected element
    .text();

来源：https://stackoverflow.com/a/23364910/1524085

Answer 3

以下是h3标签生成的html示例;判断一下jQuery应该是什么：

<h3 class="ui-collapsible-heading">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-fullsize ui-btn-icon-left ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="false">
        <span class="ui-btn-inner">
            <span class="ui-btn-text">
                rerrrwe <a class="icon-pencil-1 labelEditIcon  ui-link"></a>
                <span class="ui-collapsible-heading-status"> click to collapse contents</span>
            </span>
            <span class="ui-icon ui-icon-shadow ui-icon-minus">&nbsp;</span>
        </span>
    </a>
</h3>

为什么你还在使用jQuery UI和jQuery UI？我虽然这两个，特别是你选择的版本，但不能很好地合作！

var name = $('h3').find( 'span span' ).contents()[0].nodeValue;
alert( name.trim() )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3 class="ui-collapsible-heading">
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-fullsize ui-btn-icon-left ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="false">
            <span class="ui-btn-inner">
                <span class="ui-btn-text">
                    rerrrwe <a class="icon-pencil-1 labelEditIcon  ui-link"></a>
                    <span class="ui-collapsible-heading-status"> click to collapse contents</span>
                </span>
                <span class="ui-icon ui-icon-shadow ui-icon-minus">&nbsp;</span>
            </span>
        </a>
    </h3>

Answer 4

这是另一种解决方案

   var response = {
        "Restaurants": [{
            "RestrntArea": "Haii",
            "cust_loc_id": "374"
        }, {
            "RestrntArea": "rerrrwe",
            "cust_loc_id": "373"
        }]
    }
showLabels();

function showLabels() {
    //$("#result").html("");
    var favoriteresultag = '';
    for (var i = 0; i < response.Restaurants.length; i++) {
        var name = response.Restaurants[i].RestrntArea;
        if (name) {
            favoriteresultag += '<div data-role="collapsible" data-inset="false" class="my-collaspible"><h3><span>' + name + '</span> <a class="icon-pencil-1 labelEditIcon "></a></h3></div>';
        }
    }
    $("#result").append(favoriteresultag).trigger("create");

}
$(document).ready(function() {
    $('.my-collaspible').bind('expand', function() {
        //alert('Expanded');
        var txt = $(this).find('h3 .ui-btn-text span').html();

        alert(txt);
        console.log(name);


    });
    $('.my-collaspible').bind('collapse', function() {
        //alert('Collapsed');
    });
});

<强>演示 http://jsfiddle.net/znz17ctm/15/

Answer 5

它应该是这样的：

<script>
var response = {
    "Restaurants": [{
        "RestrntArea": "Haii",
        "cust_loc_id": "374"
    }, {
        "RestrntArea": "rerrrwe",
        "cust_loc_id": "373"
    }]
}
showLabels();

function showLabels() {
    //$("#result").html("");
    var favoriteresultag = '';
    for (var i = 0; i < response.Restaurants.length; i++) {
        var name = response.Restaurants[i].RestrntArea;
        if (name) {
            favoriteresultag += '<div data-role="collapsible" data-inset="false" class="my-collaspible"><h3>' + name + ' <a class="icon-pencil-1 labelEditIcon "></a></h3></div>';
        }
    }
    $("#result").append(favoriteresultag).trigger("create");

}
$(document).ready(function() {
    $('.my-collaspible').bind('expand', function() {
        //alert('Expanded');
        var name = $(this).find('h3 .ui-btn-text').clone().children().remove().end().text();

        alert(name);
        console.log(name);


    });
    $('.my-collaspible').bind('collapse', function() {
        //alert('Collapsed');
    });
});
</script>

在这种情况下如何捕获精确的h3文本

5 个答案: