使用链接的脚本在其自己的值中更新id

时间:2014-07-31 22:23:56

标签: jquery

我需要此代码以适当的值打印链接,而不是列表顶部的值。

我尝试在前面添加$(this).parent()。children或$(this).siblings但根本不起作用。

HTML

<nav id="menu">
    <div id="app">
        <ul class="List"><span>Enter Number below</span>                
            <div id="number">
            <input type="text" name="number" id="textbox1" value="22984">    
                <li><span>Disney</span>
                <ul>                    
                      <li><span>Lands</span>
                          <ul>                           
                             <li><span>Adventureland</span>
                                <ul id="BCPX3205">                                 
                                    <div id="linkified">value</div>               
                                 </ul>
                             </li>
                             <li><span>Frontierland</span>
                                <ul id="AXSE5425">                             
                                            <div id="linkified">value</div>       
                                    </ul>
                             </li>
                             <li><span>Fantasyland</span>
                                <ul id="GBHY8745">                             
                                            <div id="linkified">value</div> 
                                    </ul>
                             </li>
                             <li><span>Tomorrowland</span>
                                <ul id="CNFE4767">                            
                                            <div id="linkified">value</div>       
                                    </ul>
                             </li>
                              <li><span>Toontown</span>
                        <ul id="BCPLMP245">         
                            <div id="linkified">value</div>
                        </ul>
                     </li>
                          </ul>
                      </li>                    
                </ul>
            </li>               

的javascript

$('ul[id]').each(function() {
var ul = this;
$(ul).append(
    $(document.createElement('li'))
        .append(
            $(document.createElement('button'))
                .addClass('redirect')
                .text('Open Website')
                .click(function() {
                    var goUrl = 'http://www.example.com/' + $(ul).attr('id') + '?referringRepId=' + $("#textbox1").val();
                    window.location = goUrl;
                })
        )
    .append(
            $(document.createElement('button'))
                .addClass('redirect')
                .text('Email Link')
                .click(function() {
                    var emaillink = 'http://www.example.com/' + $(ul).attr('id') + '%3FreferringRepId=' + $("#textbox1").val();
            console.log(emaillink);
            window.location.href = 'mailto:?subject=&body=' + emaillink;    
                })
        )
        .append(
            $(document.createElement('button'))
                .addClass('txtLinky')
                .text('Click Link')
                .click(function() {
                 $('#linkified').html('http://www.example.com/' + $(ul).attr('id') + '?referringRepId=' + $("#textbox1").val());

    $('#linkified').linkify({
               tagName: 'a',
               target: '_blank',
               newLine: '\n'
            }); 


                })
        )
)
});

http://jsfiddle.net/VFhK9/81/

1 个答案:

答案 0 :(得分:1)

您需要根据点击的按钮选择相应的linkified根据您需要获取父ul的HTML规范并从那里找到子linkiefied来完成此操作。

$(this).parent().parent().find('.linkified').html('http://www.example.com/' + $(ul).attr('id') + '?referringRepId=' + $("#textbox1").val());

此外,ID应该是唯一的,因此我将id更改为class

Fiddle