Как сохранить тег span рядом с текстовым полем?

Question

Привет, У меня есть код javascript, где должно произойти то, что он добавляет текстовое поле и [Открыть сетку] (которая находится в промежутке) рядом с текстовым полем. Текстовое поле хранится в массиве + «[]», поэтому я попытался поместить диапазон после текстового поля с помощью .after(), но проблема в том, что даже если он отображает текстовое поле, он не отображает диапазон [Open Grid]. Как получить гиперссылку для отображения рядом с текстовым полем?

Ниже приведен код:

<script> 

    $(document).on('click','.showGrid', function(e) { 

     $(".gridBtns").removeClass("gridBtnsOn"); 

     var value = $(this) 
      .siblings('input[name=gridValues]').val(); 

     $("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn"); 

     $('.optionTypeTbl').fadeToggle('slow'); 
     $(this).parent().append($('.optionTypeTbl')); 
     $('.optionTypeTbl').css({ 

      left: $(this).position().left, 
      top: $(this).position().top + 20 

     }); 

     e.stopPropagation(); 

    }); 


     function insertQuestion(form) { 

     var context = $('#optionAndAnswer'); 

     var $tbody = $('#qandatbl > tbody'); 
     var $tr = $("<tr class='optionAndAnswer' align='center'></tr>"); 
     var $options = $("<td class='option'></td>"); 

     $('.gridTxt', context).each(function() { 

var $this = $(this); 
var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />") 
    .attr('name',$this.attr('name')+"[]") 
    .attr('value',$this.val()) 
    .appendTo($options) 
    .after("<span href='#' class='showGrid'>[Open Grid]</span>"); 

    $questionType = $this.val(); 


     }); 

     $tr.append($options);  
     $tbody.append($tr); 

     } 

    </script> 


    <form id="QandA" action="insertQuestion.php" method="post" > 


    <table id="optionAndAnswer" class="optionAndAnswer"> 
    <tr class="option"> 
    <td>Option Type:</td> 
    <td> 
    <div> 
     <input type="text" name="gridValues" class="gridTxt maxRow" readonly="readonly" /> 
     <span href="#" class="showGrid" id="showGridId">[Open Grid]</span> 
    </div> 
    <table class="optionTypeTbl"> 
    <tr> 

     <?php 
     $i = 1; 
     foreach($num as $key => $val){ 
      if($i%7 == 1) echo"<tr><td>"; 
      echo"<input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\">";   
      if($i%7 == 0) echo"</td></tr>"; 
      $i++; 
     } 
     ?> 

      </tr> 
      <tr> 
      <td> 
      <input class="gridBtns" name="btnTrueorFalseName" id="btnTrueorFalse" type="button" value="True or False" /> 
      <input class="gridBtns" name="btnYesorNoName" id="btnYesorNo" type="button" value="Yes or No" /> 
      </td> 
      </tr> 
      </table> 

      </td> 
    </tr> 
    </td> 
    </tr> 
    </table> 


    </form> 

Answer 1

это потому, что ваш:

var value = $(this) 
      .siblings('input[name=gridValues]').val(); 

на самом деле:

var value = $(this) 
      .siblings('input[name=gridValues[]]').val(); 

попробуйте это. если не. то есть .map() - которые я не использовал раньше, но мы можем заглянуть вместе ...

---

UPDATE

может быть вам даже нужно:

var value = $(this) 
      .siblings('input[name=gridValues\\[\\]]').val(); 

Answer 2

var $this = $(this); 
var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />") 
    .attr('name',$this.attr('name')+"[]") 
    .attr('value',$this.val()) 
    .appendTo($options) 
    .after("<span class='showGrid'>[Open Grid]</span>"); 

попробовать этот