Question

好的，所以这可能有点复杂，所以请耐心等待。

我有一个HTML块，其中有几个隐藏字段，其中包含坐标：

    <div id="content">
<div class="event">
    Blah blah blah
    <input id="e1coords" class="coords" name="e1coords" type="hidden" value="-27.482359,153.024725" />
</div>

<div class="event">
    blah blah blah
    <input id="e2coords" class="coords" name="e2coords" type="hidden" value="-27.471134,153.0182" />
</div>
<div class="event">
    blah blah blah
    <input id="e3coords" class="coords" name="e3coords" type="hidden" value="-27.471667,153.023704" />
</div>
    </div>

我有一些代码应该从每个隐藏的输入（坐标）获取值并将其转移到href url的一部分。 EG：

   //GET COORDS
            $(content).find('.coords').each(function() {
                var coords = $(this).val();

                //CREATE BUTTON, ADD VALUE FROM
                var input2 = '<div class="inputholder"><a class="viewmap" href="maptest.html?longlat='+ coords +' "><button>Find on Map</button></a></div>';
                //ATTACH BUTTON
                $(input2).insertAfter($('#showday1 .save_event'));
            });

这可行到一定程度。它为每个输入创建一个按钮（因此在上面的示例中创建了3个按钮），但每个输出3次。所以从上面的HTML我得到9个按钮，应该有3个。

任何人都可以建议每个隐藏输入只显示一次按钮的方法吗？

Answer 1

<强>编辑：

您的准则工作正常。 SEE HERE

您的网页中是否有以下HTML块？

<div id="showday1">
    <div class="save_event">save event</div>
</div>

注意：以上代码引用此行$('#showday1 .save_event')

Answer 2

你可以试试这个：

$('#content .coords').each(function() {
     var coords = $(this).val();
     //CREATE BUTTON, ADD VALUE FROM
     var input2 = '<div class="inputholder"><a class="viewmap" href="maptest.html?longlat='+ coords +' "><button>Find on Map</button></a></div>';
     //ATTACH BUTTON
      $(input2).appendTo($(this).parent()); //This append the button on the div event, change with #showday1 ...
});

Answer 3

如果您希望将生成的按钮放在每个隐藏的输入HTML字段后面（根据您的输入），我会像：

$(document).ready(function() {
           $(content).find('.coords').each(function() { 
                var coords = $(this).val(); 
                var input2 = '<div class="inputholder"><a class="viewmap" href="maptest.html?longlat='+ coords +' "><button>Find on Map</button></a></div>'; 
                $(this).after(input2);
            });   
});

由于您已检测到输入（使用类coords），after jQuery函数应在每个隐藏输入后追加所需内容

<小时/> 另一方面，如果您只想将所有按钮放在div的末尾id=content：

$(document).ready(function() {
           var input2="";
           $(content).find('.coords').each(function() { 
                var coords = $(this).val(); 
                input2 += '<div class="inputholder"><a class="viewmap" href="maptest.html?longlat='+ coords +' "><button>Find on Map</button></a></div>'; 
            }); 
            $(content).after(input2);
});

在这种方法中，我们聚合了所有生成的输入（对于每个隐藏的输入），最后我们将它们附加到包装器div

使用Jquery生成具有唯一href的按钮

3 个答案: