Javascript-форум - Несколько вопросов jQuery

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Несколько вопросов jQuery (https://javascript.ru/forum/misc/32902-neskolko-voprosov-jquery.html)

Несколько вопросов jQuery

Всем привет! :yes:

В данный момент разрабатываю сайт и сталкиваюсь с различными проблемами, может даже элементарными. Но знаний не хватает, для их решения, а Google ищет не совсем то, что нужно :-E

Дабы Вы не думали, что я пользуюсь Вашим гостеприимством, буду показывать, как я пытался, то или иное сделать. Но в некоторых случаех, я был дуб дубом :(

Сообственно вопросы.

1. Сначала самый простой вопрос. Имеем:

<td width="20%" class="gTableSubTop" align="center">
<td width="8%" class="gTableSubTop" align="center">
<td width="8%" class="gTableSubTop" align="center">

Как к ним обратиться, если у них один класс? Единственное, что их различает, это width. Делал так:

$("td.gTableSubTop[width='8%']").attr("width", "20%");

Но ничего не работает, вообще все скрипты перестают работать, после этого. Мне это нужно для того, чтобы поменять размеры td.gTableSubTop. И не искать их через .eq(), ведь на форуме могут происходить изменения из админ-панели.

P.S.: Ещё, лучше добавить туда .each()

2. Второй вопрос. Нужно найти div.funcBlock, удалить его и два <br>, что после него. Как это сделать? Кааак? :(

3. Ещё один вопрос Имеем класс td.forumLastPostTd, в нём следующее содержимое:

<a title="К последнему сообщению" class="forumLastPostLink" href="#">Вторник, 30.10.2012, 09:56</a>
<a href="#">
<img alt="" title="К первому непрочитанному сообщению" src="#">
</a>
<br>
Тема: 
<a class="forumLastPostLink" href="#">Предложения</a>
<br>
Сообщение от: 
[JS]<span class="lastPostUser">
<a class="lastPostUserLink" href="#">User</a>
</span>

Нужно сделать, чтобы было примерно так:

<td class="forumLastPostTd"><a title="К последнему сообщению" class="forumLastPostLink" href="#">Вторник, 30.10.2012, 09:56</a>
<a href="#">
<img alt="" title="К первому непрочитанному сообщению" src="">
</a>
<br>
<span class="lastPostUser">
<a class="lastPostUserLink" href="#">User</a>
</span>
</td>

Т.е. из основного варианта удалить <br>, Тема: и ссылку с классом a.forumLastPostLink

<br>
Тема: 
<a class="forumLastPostLink" href="#">Предложения</a>

и текст - Сообщение от:

Этот вопрос, один из самых важных! :cray:

4. Последний вопрос :thanks: :thanks: :thanks:
Имеет стандартный вид статистики форума:

Вот его код:

<style>.gTableRight {display:none;}</style><div class="gDivLeft">
<div class="gDivRight">
<table border="0" width="100%" cellspacing="1" cellpadding="0" class="gTable">
<tbody>
<tr>
<td colspan="2" class="gTableTop">
<div style="float:right" class="gTopCornerRight"></div>
Дополнительная информация
</td>
</tr>
<tr>
<td colspan="2" class="gTableSubTop">
Посетители: 
<b>1</b> (участников - <b>1</b>, гостей - <b>0</b>)
</td>
</tr>
<tr>
<td width="7%" align="center" class="gTableRight" style="padding:7px;">
<img alt="" style="margin:0;padding:0;border:0;" title="Посетители" src="#">
</td>
<td class="gTableBody1" style="padding:10px;">
<div class="statsRecord">
Рекорд посещаемости форума 
<b>3</b>
зафиксирован Вторник, 12:02, 30.10.2012.
</div>
<a class="groupAdmin" href="#" >Касти_</a>
</td>
</tr>
<tr>
<td colspan="2" class="gTableSubTop">Статистика форума</td>
</tr>
<tr>
<td align="center" class="gTableRight" style="padding:7px;">
<img alt="" style="margin:0;padding:0;border:0;" title="Статистика форума" src="#">
</td>
<td class="gTableBody1" style="padding:10px;">
Всего создано <b>16</b> тем, в которые добавлено <b>15</b> ответов.
<br>
Зарегистрировано <b>2</b> участников. Приветствуем нового участника <b><a class="lastUserLink" href="#">Витто_</a></b>.
</td>
</tr>
<tr>
<td colspan="2" class="gTableSubTop">Поздравляем с Днем Рождения!</td>
</tr>
<tr>
<td align="center" class="gTableRight" style="padding:7px;">
<img alt="" style="margin:0;padding:0;border:0;" title="Поздравляем с Днем Рождения!" src="#">
</td>
<td class="gTableBody1" style="padding:10px;">
<div class="birthdaysBlock">
<a class="userBirthdayLink" href="#">User</a>
<span class="userAge">(18)</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Нужно немного изменить его до такого состояния:

Код:

<div class="gDivLeft">
<div class="gDivRight">
<table border="0" width="100%" cellspacing="1" cellpadding="0" class="gTable">
<tbody>
<tr>
<td colspan="2" class="gTableTop">
<div style="float:right" class="gTopCornerRight"></div>
Дополнительная информация
</td>
</tr>
<tr>
<td colspan="2" class="gTableSubTop">Статистика форума:
</td>
</tr>
<tr>
<td width="7%" align="center" class="gTableRight" style="padding:7px;">
<img alt="" style="margin:0;padding:0;border:0;" title="Посетители" src="#">
</td>
<td class="gTableBody1" style="padding:10px;">
Тем: 16 | Сообщений: 15 | Всего пользователей: 2 | Онлайн: 1
<br>
Приветствуем нового пользователя: <a href="#">User_2</a>
</td>
</tr>
<tr>
<td colspan="2" class="gTableSubTop">Сегодня день рождение у:</td>
</tr>
<tr>
<td align="center" class="gTableRight" style="padding:7px;">
<img alt="" style="margin:0;padding:0;border:0;" title="Статистика форума" src="#">
</td>
<td class="gTableBody1" style="padding:10px;">
<a href="#">User</a> (18)
</td>
</tr>
</tbody>
</table>
</div>
</div>

Хочу заменить, когда ни у кого нету дня рождения (т.е. не находится .gTableSubTop с текстом внутри: Поздравляем с Днем Рождения!). Нужно писать вместо ников именинников следующее: Сегодня никто не празднует своё день рождение.

И второе, что хотелось бы затронуть.. .gTableSubTop стоит буквально везде! Если что-то менять приходиться, нужно обращаться к нему на прямую.. тоже самое, что и с width.

Боже мой. Сколько я настрочил. Дабы не плодить темы, решил сразу в одной обо всём спросить.. Может это и наглость, но пожалуйста, помогите сделать. У меня "тупо силёнок" не хватит. Больше вопросов, дай бог, не последует.

С огромным Уважением Дмитрий! :thanks:

P.S.: Заранее спасибо!

Хоть и сам начинающий, но рискну попробовать помочь.
1.
Добавить еще классы

<td width="20%" class="gTableSubTop anotherclass" align="center">
<td width="8%" class="gTableSubTop anotherclass2" align="center">

и обращаться через них.

А вообще я наверное не совсем правильно понял. Вы не имеете возможность редактировать html и хотите сделать преобразования с помощью jQuery?

Если вы желаете задать ширину 20%, и другие ячейки ее уже имеют, почему не просто

$("td.gTableSubTop").attr("width", "20%");

Ну или ищите тогда по содержимому td.gTableSubTop, с помощью селектора по содержимому :contains(str)
http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80_% D0%BF%D0%BE_%D1%82%D0%B5%D0%BA%D1%81%D1%82%D1%83

2.

$('div.funcBlock').nextUntil(".someblock").remove(); 
$('div.funcBlock').remove();

.someblock - элемент после <br/>

3. Как-то так наверное:

$('a.forumLastPostLink').prevUntil("[href = #").remove();
$('a.forumLastPostLink').nextUntil('.lastPostUser').remove();
$('a.forumLastPostLink').remove();
var html = $('td.forumLastPostTd').html();
html = html.replace(\(Тема:|Сообщение от:)\,"");
$('td.forumLastPostTd').html(html);

Цитата:

Сообщение от DS_

<td width="20%" class="gTableSubTop" align="center"><td width="8%" class="gTableSubTop" align="center"><td width="8%" class="gTableSubTop" align="center">

Как к ним обратиться, если у них один класс? Единственное, что их различает, это width. Делал так:
$("td.gTableSubTop[width='8%']").attr("width", "20%")

$("td.gTableSubTop[width^='8']").attr("width", "20%")

<td class="forumLastPostTd">
<a title="К последнему сообщению" class="forumLastPostLink" href="#">Вторник, 30.10.2012, 09:56</a>
<a href="#">
<img alt="" title="К первому непрочитанному сообщению" src="#">
</a>
<br>
Тема: 
<a class="forumLastPostLink" href="#">Предложения</a>
<br>
Сообщение от: 
<span class="lastPostUser">
<a class="lastPostUserLink" href="#">User</a>
</span>
</td>


<script>
 $("td.forumLastPostTd").each(function () {
   var a=$(this).html();
   $(this).replaceWith(a.replace(/<br?.>[\s\S]*?<br?.>/igm,"<br/>"));
 });
</script>

Цитата:

2. Второй вопрос. Нужно найти div.funcBlock, удалить его и два <br>, что после него. Как это сделать? Кааак?

Эм.. может как-то так:
$('.funcBlock + br + br, .funcBlock + br, .funcBlock').remove();

Цитата:

3. Ещё один вопрос Имеем класс td.forumLastPostTd, в нём следующее содержимое:

$('.forumLastPostTd br:eq(0), .forumLastPostTd .forumLastPostLink').remove();

Удалить текст можно попробовать так (на скорую руку вариант):
$('.forumLastPostTd').html(document.getElementsByC lassName('forumLastPostTd')[0].innerHTML.replace('\Тема:\', ''))

_______________________
С чётвертым вопросом, там нужно по eq() делать, так как на юкозе, поскольку я знаю, там .gTable, gDivRight и т.д. - они идут в каждом разделе форума.

Здравствуйте.
Пытаюсь переделать нижеследующий скрипт под свои цели.
Скрипт - довольно стандартное решение для появления на странице кнопки "вверх" при скроллинге.
Цели - нужно сделать, чтобы при скроллинге вниз в определенный момент появлялся футер и фиксировался внизу экрана. При прокрутке страницы к началу футер должен благополучно пропадать.
Т.к. в JS я не силен, а решить подобное средствами CSS не смог, решил обратиться к готовому и подходящему (на мой взгляд) решению. В рабочий вид пока привести не смог. Буду благодарен за помощь.
Скрипт:

var scrolltotop={
	//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
	//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
	setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
	controlHTML: '<img src="/images/up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
	controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
	anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

	state: {isvisible:false, shouldvisible:false},

	scrollup:function(){
		if (!this.cssfixedsupport) //if control is positioned using JavaScript
			this.$control.css({opacity:0}) //hide control immediately after clicking it
		var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
		if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
			dest=jQuery('#'+dest).offset().top
		else
			dest=0
		this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
	},

	keepfixed:function(){
		var $window=jQuery(window)
		var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
		var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
		this.$control.css({left:controlx+'px', top:controly+'px'})
	},

	togglecontrol:function(){
		var scrolltop=jQuery(window).scrollTop()
		if (!this.cssfixedsupport)
			this.keepfixed()
		this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
		if (this.state.shouldvisible && !this.state.isvisible){
			this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
			this.state.isvisible=true
		}
		else if (this.state.shouldvisible==false && this.state.isvisible){
			this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
			this.state.isvisible=false
		}
	},
	
	init:function(){
		jQuery(document).ready(function($){
			var mainobj=scrolltotop
			var iebrws=document.all
			mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
			mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
			mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
				.attr({title:'Scroll Back to Top'})
				.click(function(){mainobj.scrollup(); return false})
				.appendTo('body')
			if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
				mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
			mainobj.togglecontrol()
			$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
				mainobj.scrollup()
				return false
			})
			$(window).bind('scroll resize', function(e){
				mainobj.togglecontrol()
			})
		})
	}
}

scrolltotop.init()

С уважением,
Сергей

EXxX,
Вот, на скорую руку написал:

<div id="upButton" style="position:fixed; z-index:10; right:20px; bottom:20px; display:none"><a href="#top">Вверх!</a></div>

$(window).bind('scroll', function(){
if($(this).scrollTop() > 300){$('#upButton').fadeIn(500);}
else{$('#upButton').fadeOut(500);}})

Ruslan_xDD, спасибо большое за то, что помогаете. Правда, я, похоже, объяснил коряво - хотел, чтобы по принципу кнопки работал футер. При загрузке страницы его нет, а при скроллинге вниз он появляется с определенного места. При скроллинге вверх - он снова пропадает с того же места. Это я на всякий случай...
Ваш код у меня, к сожалению, не срабатывает. В любом случае - спасибо за помощь!

EXxX, странно, у меня всё работает. Работает всё именно так, как Вы хотите. Может быть Вы что-то не так вставили?

Тестил у себя на сайте, вот, можете даже посмотреть: http://mkheroes.ru/index/test/0-269
При прокрутке вниз - справа внизу, над часами появляется ссылка "Вверх".