Форум

mbp64 · #1 (**permalink**) 22.05.2014, 17:01

Есть таблица из элементов вида:

<div class="catalog">
  <div ...>
    <a id="uniq_id"> .. </a>
 </div>
</div>

Как определить порядковый номер такого элемента при наведении на него курсора. Желательно без переформатирования элементов списка.

рони · #2 (**permalink**) 22.05.2014, 17:07

mbp64,
а можно поподробнее про элемент

mbp64 · #3 (**permalink**) 22.05.2014, 17:17

Это элемент каталога битрикса.

<div class="bx_catalog_list_home col4">    <div class="bx_catalog_item">
    <div class="bx_catalog_item_container" id="bx_2647885750_566">
		<a id="bx_2647885750_566_pict"
			href="/catalog/7645/18%D0%B7/"
			class="bx_catalog_item_images"
			style="background-image: url(/upload/iblock/f4b/f4b2f913465e3abf549791c6452f7be2.jpg)" title="">						</a><div class="bx_catalog_item_title"><a href="/catalog/7645/18%D0%B7/" title="Аккумуляторная дрель-шуруповерт ЗУБР ЗДА-18-КН">Аккумуляторная дрель-шуруповерт ЗУБР ЗДА-18-КН</a></div>
	<div class="bx_catalog_item_price">
    
    
    <div id="bx_2647885750_566_price" ></div>
    
    
    
    </div><div class="bx_catalog_item_controls">		<div class="bx_catalog_item_controls_blockone"><div style="display: inline-block;position: relative;">
			<a id="bx_2647885750_566_quant_up" href="javascript:void(0)" class="defgreybott3" rel="nofollow"><span class="add"></span></a>
			<input type="text" class="" id="bx_2647885750_566_quantity" name="quantity" value="1">
			<a id="bx_2647885750_566_quant_down" href="javascript:void(0)" class="defgreybott3" rel="nofollow"><span class="unadd"></span></a>
					</div></div>
          
				
			<a id="bx_2647885750_566_buy_link" class="bixdig54addcart" href="javascript:void(0)" rel="nofollow">
			<span>
			Купить	</span></a>
	
			<div style="clear: both;"></div></div><script type="text/javascript">
		var obbx_2647885750_566 = new JCCatalogSection({'PRODUCT_TYPE':'1','SHOW_QUANTITY':true,'SHOW_ADD_BASKET_BTN':false,'SHOW_BUY_BTN':true,'SHOW_ABSENT':true,'PRODUCT':{'ID':'566','NAME':'Аккумуляторная дрель-шуруповерт ЗУБР ЗДА-18-КН','PICT':{'ID':'2240','TIMESTAMP_X':'27.01.2014 19:56:50','MODULE_ID':'iblock','HEIGHT':'700','WIDTH':'700','FILE_SIZE':'42467','CONTENT_TYPE':'image/jpeg','SUBDIR':'iblock/f4b','FILE_NAME':'f4b2f913465e3abf549791c6452f7be2.jpg','ORIGINAL_NAME':'akkumulyatornaya-drel-shurupovert-zubr-zda-18-kn.jpg','DESCRIPTION':'','HANDLER_ID':'','SRC':'/upload/iblock/f4b/f4b2f913465e3abf549791c6452f7be2.jpg','ALT':'картинка Аккумуляторная дрель-шуруповерт ЗУБР ЗДА-18-КН от магазина Диагональ','TITLE':'картинка Аккумуляторная дрель-шуруповерт ЗУБР ЗДА-18-КН магазин Диагональ'},'CAN_BUY':true,'SUBSCRIPTION':false,'CHECK_QUANTITY':false,'MAX_QUANTITY':'0','STEP_QUANTITY':'1','QUANTITY_FLOAT':false,'ADD_URL':'/?action=ADD2BASKET&id=566&clear_cache=Y','SUBSCRIBE_URL':'/?action=SUBSCRIBE_PRODUCT&id=566&clear_cache=Y'},'VISUAL':{'ID':'bx_2647885750_566','PICT_ID':'bx_2647885750_566_pict','QUANTITY_ID':'bx_2647885750_566_quantity','QUANTITY_UP_ID':'bx_2647885750_566_quant_up','QUANTITY_DOWN_ID':'bx_2647885750_566_quant_down','PRICE_ID':'bx_2647885750_566_price','BUY_ID':'bx_2647885750_566_buy_link'},'AJAX_PATH':'/?clear_cache=Y'});
		</script></div></div>

рони · #4 (**permalink**) 22.05.2014, 17:22

mbp64,
много букв неосилил -- ниже код наведите на точки
нужная вам строка 25

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Tooltip - Custom Styling</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

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

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

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>

  $(function() {

    $( ".catalog" ).tooltip({
        content: function() {
        var indx = $(".catalog").index( this );
        return "Моя номера "  +  indx
        }
    }).attr({"title":""});

  });

  </script>

  <style>.ui-tooltip,.arrow:after{background:#000;border:2px solid white}
  .ui-tooltip{padding:10px 20px;color:#FFF;border-radius:20px;font:bold 14px "Helvetica Neue",Sans-Serif;text-transform:uppercase;box-shadow:0 0 7px black}
  .arrow{width:70px;height:16px;overflow:hidden;position:absolute;left:50%;margin-left:-35px;bottom:-16px}
  .arrow.top{top:-16px;bottom:auto}
  .arrow.left{left:20%}
  .arrow:after{content:"";position:absolute;left:20px;top:-20px;width:25px;height:25px;box-shadow:6px 5px 9px -9px black;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);tranform:rotate(45deg)}
  .arrow.top:after{bottom:-20px;top:auto}
  </style>

</head>

<body>



<div class="catalog" >
  <div>
    <a id="uniq_id"> .. </a>
 </div>
</div>


     <div class="catalog">
  <div>
    <a id="uniq_id"> .. </a>
 </div>
</div>
</body>
</html>

mbp64 · #5 (**permalink**) 22.05.2014, 17:45

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript