Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как обратиться к атрибутам двух братьев (https://javascript.ru/forum/jquery/17070-kak-obratitsya-k-atributam-dvukh-bratev.html)

shaltay 04.05.2011 19:52

Как обратиться к атрибутам двух братьев
 
Доброго времени!
Вот такая проблема. Есть скрипт:
<div>
<input type="text" value="" class="elem2" /> <input type="text" value="" class="prname" /><input type="button" value="go" class="but_go" />
</div>


И jquery:

$('.but_go').click(function(){
	var param = $(this).siblings().attr('value');
	alert (param);
});


Надо чтобы при нажатии на кнопку, он считывал value обоих input'ов (кроме себя) и помещал их в разные переменные. Как это сделать, помогите плиз!

Заранее спасибо!

walik 04.05.2011 20:02

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
	$('.but_go').click(function(){
		$(this).siblings().each(function() {
			alert($(this).val());
		});
	});
});
</script>
</head>
<body>
<div>
<input type="text" value="" class="elem2" /> 
<input type="text" value="" class="prname" />
<input type="button" value="go" class="but_go" />
</div>
</body>
</html>

shaltay 04.05.2011 20:47

Спасибо! Но алерт - это я так, для примера. А надо сохранить в две пеерменные, чтобы потом показать их в другом месте.
МОжно так?

walik 04.05.2011 21:13

Ну да сохраняйте в переменные и показывайте их.
var values = [];
$(function() {
    $('.but_go').click(function(){
        $(this).siblings().each(function(index) {
            values[index] = $(this).val();
        });
    });
});

alert(values[0]);
alert(values[1]);


Или если вы заранее знаете что будут именно 2 элемента, то:
$(function() {
    $('.but_go').click(function(){
        var firstValue = $(this).siblings().eq(0);
        var secondValue= $(this).siblings().eq(1);
    });
});

alert(firstValue);
alert(secondValue);

shaltay 05.05.2011 11:03

Спасибо! Про eq() никогда не слышал. Классная функция!
Но мне нужно узнать атрибуты сиблингов.
Пишу так:
$('.but_go').click(function(){
        var firstValue = $(this).siblings().attr('value').eq(0);
        var secondValue= $(this).siblings().attr('value').eq(1);
		alert(firstValue);
		alert(secondValue);
    });


Ничего не работает..

shaltay 05.05.2011 11:12

Все, поменял местами attr и eq и все стало так как надо!
$('.but_go').click(function(){
        var firstValue = $(this).siblings().eq(0).attr('value');
        var secondValue= $(this).siblings().eq(1).attr('value');
		alert(firstValue);
		alert(secondValue);
    });


спасибо большое!

walik, подскажите, а чем правильнее делать такую конструкцию:
$(function() {
    $('.but_go').click(function(){
        ....
    });
});


чем такую?:
$('.but_go').click(function(){
         .....
    });

Ведь вторая проще с виду.

shaltay 05.05.2011 17:56

Чтобы не открывать новую тему, напишу тут следующий вопрос.

яваскрипт:
$('#add_input').click(function(){
	$('#table').append('<tr><td><input type="text" value="" class="elem2" /> <input type="text" value="" class=prname /><input type="button" value="go" class="but_go" /></td></tr>');
	$('.but_go').click(function(){
		var name = $(this).siblings().eq(0).attr('value');
		var a = Number($(this).siblings().eq(1).attr('value'));
		$('#itog').append('<div class="work">'+name+' <span class=timetime>'+a+'</span></div>');
	});
});


и хтмл:
<table id="table">
</table>
<input type="button" value="еще" id="add_input" /><br />


При нажатии на кнопку id="add_input" генерируется строка таблицы с кнопкой. При нажатии на кнопку, содержимое строки копируется в другой див.
Так вот если добавить две и больше строк, то при нажатии на кнопку первой строки, содержимое скопируется столько раз, сколько добавлено строк. Как от этого избавиться - никак не понимаю.

walik 05.05.2011 18:30

Цитата:

Сообщение от shaltay
а чем правильнее делать такую конструкцию

Первой конструкцией вы вешаете событие когда документ уже загружен, а при втором до загрузки (вроде не должно работать).

melky 05.05.2011 18:35

Цитата:

Сообщение от shaltay (Сообщение 103455)
При нажатии на кнопку id="add_input" генерируется строка таблицы с кнопкой. При нажатии на кнопку, содержимое строки копируется в другой див.
Так вот если добавить две и больше строк, то при нажатии на кнопку первой строки, содержимое скопируется столько раз, сколько добавлено строк. Как от этого избавиться - никак не понимаю.

ну так копируйте,а не добавляйте

$('#itog').append('<div class="work">'+name+' <span class=timetime>'+a+'</span></div>');


append добавляет в конец

делайте так

$('#itog').*!*html*/!*('<div class="work">'+name+' <span class=timetime>'+a+'</span></div>');

shaltay 06.05.2011 12:45

Цитата:

Сообщение от melky (Сообщение 103469)
ну так копируйте,а не добавляйте

Так мне-то и надо чтобы добавлялось. ЧТобы при каждом нажатии появлялась новая строка, с которой потом можно будет работать. Но чтобы добавлялась только один раз, а не несколько при одном нажатии.

shaltay 06.05.2011 12:51

Эту проблему можно решить разными "воркэраундами", но нужно именно сделать так чтобы функция по нажатию выполнялась один раз. Там есть счетчик, который тоже зависит от количество запусков функции.

shaltay 06.05.2011 12:53

Цитата:

Сообщение от walik (Сообщение 103468)
Первой конструкцией вы вешаете событие когда документ уже загружен, а при втором до загрузки (вроде не должно работать).

Да нет, вроде бы работает и так и так. Там же весь скрипт в большую функцию $(document).ready(function() {...}); засунут.

walik 06.05.2011 15:27

Ну если все внутри
$(document).ready(function() {...});
то тогда нет смысла писать
$(function() {...});

Короче говоря
$(document).ready(function() {...});

и
$(function() {...});

одинаковые

shaltay 06.05.2011 16:15

Понял, спасибо!

Но вопрос так и не решен..


Часовой пояс GMT +3, время: 00:50.