2015-04-08 4 views
2

У меня есть эти входы html.jquery добавить элемент рядом с элементом ввода

<input type='text' class='req-in' name='fname'> 
<input type='text' class='req-in' name='lname'> 

Я пытаюсь добавить элемент somr рядом с полем ввода. Я пробовал append() и prepend(), но все идет не так.

это мой код:

$('.req-in').blur(function() { 
     $(this).append('<p>some text here for this field only!</p>'); 
    }); 

это возможно? мой идеальный выход был бы как этот

<input type='text' class='req-in' name='fname'><p>some text here for this field only!</p> 
<input type='text' class='req-in' name='lname'> 

ответ

4

Вам нужно использовать .after() метод.

Вставить содержимое, указанное параметром, после каждого элемента в наборе согласованных элементов.

$('.req-in').blur(function() { 
    $(this).after('<p>some text here for this field only!</p>'); 
}); 

или .insertAfter()

Вставьте каждый элемент в наборе соответствующих элементов после цели.

$('.req-in').blur(function() { 
$('<p>some text here for this field only!</p>').insertAfter($(this)); 
}); 
+0

D'Oh! Побей меня. –

+0

Барабанщик барабанщика бьется :) –

0

Попробуйте это

<!DOCTYPE html> 
<html> 
<title>Stack HTML</title> 
<link rel="stylesheet" href="../repo/css/bootstrap.css" type="text/css" /> 
<script src="https://code.jquery.com/jquery-2.1.3.js"></script> 
<script src="../repo/js/bootstrap.js"></script> 
<script src="../repo/js/jquery.validate.js"></script> 
<head></head> 
<body> 

    <input type='text' class='req-in' name='fname'> 
    <input type='text' class='req-in' name='lname'> 

    <script> 
     $(document.body).on('blur', '.req-in' ,function(){ 
      $(this).after('<p>some text here for this field only!</p>'); 
     }); 
    </script> 
</body> 
</html> 
Смежные вопросы