Question

我们说我有10个不同的输入字段，每个字段都有一个ID。

<input id="blue">
<input id="pink">
<input id="red">
<!-- ... -->

在这些输入字段旁边，我想创建一个<a>元素，其href属性应该动态地包含紧邻它的按钮的ID：

<input id="blue">
<a href="mylink.com/blue"><a/>

<input id="pink">
<a href="mylink.com/pink"><a/>

<input id="red">
<a href="mylink.com/red"><a/>

这是我正在使用的简单代码：

＆＃13;

$('input').prepend('<a href="mylink.com/'+ID of the element next to this a tag+'/'</a>');

＆＃13;

Answer 1

您尝试使用的

$.fn.preprend方法不是解决此问题的正确工具，因为它会将内容插入元素，而您希望将其作为兄弟元素添加到它旁边。< / p>

当您需要以类似的方式操作元素集时，您应该考虑为它们提供相同的类名以便于DOM查询。然后在$.fn.after方法的帮助下很容易：

＆＃13;

// $('input') will also work of course
$('.input').after(function () {
  return $('<a>', {
    href: 'http://mylink.com/' + this.id,
    text: this.id
  })
  // or return string:
  // return '<a href="http://mylink.com/' + this.id + '">' + this.id + '</a>'
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="blue" class="input">
<input id="pink" class="input">
<input id="red" class="input">

＆＃13;

Answer 2

纯粹的js方法

https://jsfiddle.net/r5thro2w/

<input id="blue">
<input id="pink">
<input id="red">

window.onload = addAnchors();

function addAnchors() {
   let allInputs = document.getElementsByTagName("input");   
   for(i=0;i<allInputs.length;i++) {    
    let anchorTag = document.createElement('a');
    anchorTag.setAttribute('href',allInputs[i].getAttribute("id"));
    anchorTag.innerHTML = allInputs[i].getAttribute("id");
    allInputs[i].insertAdjacentElement("afterend", anchorTag);
   }   
}

Answer 3

试试这个

https://jsfiddle.net/o2gxgz9r/18686/

<div class="myHref">
 <input class="clickMe" id="blue">
 <a class="link" href="hello.com"></a>
   </div>
     <div class="myHref">
<input class="clickMe" id="pink">
<a class="link" href="hello.com"></a>
</div>
    <div class="myHref">
  <input class="clickMe" id="red">
      <a class="link" href="hello.com"></a>
 </div>

$(document).ready(function() {
    $('.clickMe').change(function(e){
       var textInput    =   $(this).val();
   $ele = $(this).closest('.myHref').find('.link');
     var _href =$(this).closest('.myHref').find('.link').attr("href");

     $(this).closest('.myHref').find('.link').attr("href", _href +'#'+textInput);

 var _href2 =$(this).closest('.myHref').find('.link').attr("href");
alert(_href2);
 });
 });

在输入

3 个答案: