Форум

zevilz · #1 (**permalink**) 11.08.2013, 16:36

есть страница с элементами с атрибутом rel, в котором прописаны id:

<p rel='1'></p>
<p rel='3'></p>
<p rel='10'></p>
....

происходит выборка с определенным значением id:

$('p[rel='+id+']') {...};

и выборка элементов с значениями не равными id:

$('p[rel!='+id+']') {...};

необходимо сделать такую же выборку при условии, что в rel может быть прописано несколько id через пробелы:

<p rel='1 14 20'></p>
<p rel='2 7 11'></p>
<p rel='44 3 33'></p>
....

Пробовал использовать ~= вместо =, но не работает.

Deff · #2 (**permalink**) 11.08.2013, 16:47

$('p[rel!="'+id1+' '+id2+' '+id3+'"]');

zevilz · #3 (**permalink**) 11.08.2013, 16:49

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

$('p[rel!="'+id1+' '+id2+' '+id3+'"]');

количество id в rel может быть любое количество, а id ищется 1

Deff · #4 (**permalink**) 11.08.2013, 16:55

zevilz,
Тут ищется не id - а контент атрибута

рони · #5 (**permalink**) 11.08.2013, 17:00

zevilz,

$('p[rel~='+id+']')

zevilz · #6 (**permalink**) 11.08.2013, 17:02

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

zevilz,

$('p[rel~='+id+']')

не работает почему-то

Deff · #7 (**permalink**) 11.08.2013, 17:05

<script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    var id1=2,id2=7,id3=11;
    var summ = ''+id1+' '+id2+' '+id3;
    $('p[rel="'+summ+'"]').each(function(){
          alert($(this).html());
    });
  });
  </script>
<p rel='1 14 20'>1 14 20</p>
<p rel='2 7 11'>2 7 11</p>
<p rel='44 3 33'>44 3 33</p>

рони · #8 (**permalink**) 11.08.2013, 17:06

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

не работает почему-то

смотрите что у вас не так

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<p rel='1 14 20'>12345</p>
<p rel='2 7 11'>12345</p>
<p rel='44 3 33'>12345</p>
<script>
var id = 1;
$('p[rel~='+id+']').css('background','red')
</script>

</body>

</html>

zevilz · #9 (**permalink**) 11.08.2013, 17:17

id передается только 1
вот полная версия скрипта:

<script src="http://code.jquery.com/jquery-latest.js"></script>

  	<script type="text/javascript">
			
			$(document).ready(function() {
				
				$('.menu li a').click(function() {
								
					$('.menu li').removeClass('selected');
					$(this).parent('li').addClass('selected');
					
					imgWidth = '52px';
					thisItem 	= $(this).attr('rel');
					
					if(thisItem != "all") {
					
						$('.item li[rel='+thisItem+']').stop()
																.animate({'width' : imgWidth, 
																			 'opacity' : 1, 
																			 'marginRight' : '.5em', 
																			 'marginLeft' : '.5em'
																			});
																			
						$('.item li[rel!='+thisItem+']').stop()
																.animate({'width' : 0, 
																			 'opacity' : 0,
																			 'marginRight' : 0, 
																			 'marginLeft' : 0
																			});
					} else {
						
						$('.item li').stop()
										.animate({'opacity' : 1, 
													 'width' : imgWidth, 
													 'marginRight' : '.5em', 
													 'marginLeft' : '.5em'
													});
					}
				})
				
				$('.item li img').animate({'opacity' : 0.5}).hover(function() {
					$(this).animate({'opacity' : 1});
				}, function() {
					$(this).animate({'opacity' : 0.5});
				});
				
			});
			
		  </script>
<style>
ul {
	margin: 0;
	text-align: left;
}

ul.menu {
	margin-left: .5em;
	margin-bottom: 1em;
}

ul.menu li {
	list-style-type: none;
	display: inline-block;
	font-weight: bold;
	text-shadow: 1px 1px 0px #f3f5da;
	padding: 2px 15px;
}
	
	.selected {
		-webkit-border-radius: 15px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background: #acac75;
		-webkit-box-shadow: 1px 1px 0px #8c8c5d;
	}
	
	.selected a, .selected a:visited {
		text-shadow: 1px 1px 0px #8c8c60;
		color: #fff;
	}

ul.item li {
	list-style-type: none;
	display: block;
	float: left;
	margin: .5em;
}
	
	ul.item li img {
		border: 5px solid #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 5px #ac987e;
		-moz-box-shadow: 0px 0px 5px #ac987e;
		box-shadow: 0px 0px 5px #ac987e;
	}


a, a:visited {
	color: #161616;
	text-decoration: none; 
}
</style>
	<ul class="menu">
		<li class="selected"><a href="#" rel="all">Все уроки</a></li>
		<li><a href="#" rel="jquery">jQuery</a></li>
		<li><a href="#" rel="css">CSS</a></li>
		<li><a href="#" rel="php">PHP</a></li>
	</ul>
	
	<ul class="item">
		<li rel="jquery"><a href="" target="_blank"><img src="rhttgbh" /></a></li>
		<li rel="jquery"><a href="" target="_blank"><img src="edhdethg" /></a></li>
		<li rel="css"><a href="" target="_blank"><img src="hetrheth" /></a></li>
		<li rel="css"><a href="" target="_blank"><img src="rthrtg" /></a></li>
		<li rel="php"><a href="" target="_blank"><img src="ethetrh" /></a></li>
		<li rel="jquery"><a href="" target="_blank"><img src="hetr" /></a></li>
		<li rel="css"><a href="" target="_blank"><img src="werhewrt" /></a></li>
		<li rel="php"><a href="" target="_blank"><img src="wtrhwetr" /></a></li>
	</ul>

Deff · #10 (**permalink**) 11.08.2013, 17:28

zevilz,
1. у Вас тут +thisItem+' , а не id
И оно единственное.. ибо как то нужно проверять соседние элементы
если нун втащить из str='1 22 55'

str='1 22 55'
var arr = str.split(/\s+/);

alert(arr[0]);

alert(arr[1]);

alert(arr[2])

Форум

Справочник

Discord чат

Курсы javascript