尝试使用.each()获取li的内容

时间:2014-07-11 05:37:20

标签: javascript jquery jquery-mobile

我有以下 HTML

<ul id="masInfoPanel" data-role="listview" class="menu17 ui-listview">
    <li class="ui-first-child"> <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mis Ventas    </a> 
    </li>
    <li class="current">    <a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mis Rentas    </a> 
    </li>
    <li>    <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mis Búsquedas    </a>

    </li>
    <li>    <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Nuevo Anuncio    </a>

    </li>
    <li>    <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mi Cuenta    </a>

    </li>
    <li>    <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Directorio de Solicitantes    </a>

    </li>
    <li data-icon="delete" class="ui-last-child"><a href="#" data-transition="slideup" data-rel="back" class="ui-btn ui-btn-icon-right ui-icon-delete">Cerrar menu</a>
    </li>
</ul>

<div id="AddContent"></div>

我正在尝试将文字放在anchor标记内但无法执行此操作

我的脚本就像这样

JS

 <script>
$(document).on('pagecreate',function(){
    $(document).on('vclick','#masInfoPanel',function(){
        $(this).find('li').each(function(){

        var cure = $(this).hasClass('current');
        if(cure){
            var text = $(this).text();
                $('#AddContent').html(text);

        }

        });
    });

});

</script>

我想要做的是当我点击任何li然后点击&#39; li&#39;具有current类的应添加到div AddContent

这是更新后的JSFiddle

谢谢

4 个答案:

答案 0 :(得分:1)

工作小提琴示例:http://jsfiddle.net/n548T/1/

您的HTML:

<ul data-role="listview" class="menu17 ui-listview">
    <li class="ui-first-child"> <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mis Ventas    </a> 
    </li>
    <li class="current"> <a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mis Rentas    </a> 
    </li>
    <li> <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mis Búsquedas    </a>

    </li>
    <li> <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Nuevo Anuncio    </a>

    </li>
    <li> <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Mi Cuenta    </a>

    </li>
    <!--<li>
    <a href="">
        <b>Mis Banners</b>
    </a>
</li>-->
    <!---- <li>
    <a href="">
        <b>Solicitudes de información</b>
    </a>
</li>--->
    <li> <a href="" class="ui-btn ui-btn-icon-right ui-icon-carat-r">
        Directorio de Solicitantes    </a>

    </li>
    <li data-icon="delete" class="ui-last-child"><a href="#" data-transition="slideup" data-rel="back" class="ui-btn ui-btn-icon-right ui-icon-delete">Cerrar menu</a>

    </li>
</ul>
<div id="AddContent"></div>

一些jQuery:

jQuery(document).ready(function ($) {
    $("li").each(function (index, el) {
        $(this).click(function (event) {
            var cure = $(this).hasClass('current');
            if (cure) {
                $("#AddContent").empty();
                var text = $(this).text();
                $("#AddContent").append(text);
                event.preventDefault();
            }
        });
    });
});

答案 1 :(得分:1)

试试这个

$(document).on('vclick', 'ul.menu17', function (e) {

    $(this).find('li').each(function () {

        if ($(this).hasClass('current')) {
            var text = $(this).text();
            $('#AddContent').html(text);

        }

    });
});

或者

 $(document).on('vclick', 'ul.menu17 li.current', function (e) {
       $('#AddContent').html( $(this).text());
});

DEMO

答案 2 :(得分:1)

我认为这应该适用于你遇到的问题:

$('li.current').on('click', function() {
    var text = $(this).find('a').html();
    $('#AddContent').append(text);
});

JSFiddle for it:http://jsfiddle.net/78jGL/4/

答案 3 :(得分:0)

这是我的回答

基于不同的人的意见

JS。

$(document).on('vclick', 'ul.menu17', function () {
        $(this).find('li').each(function () {

            var cure = $(this).hasClass('current');
            if (cure) {
                var text = $(this).text();
                $('#AddContent').html(text);
            }

        });
    });

JSFIDDLE