Как правильно выйти на нужный элемент DOM относительно кнопки, по которой кликнули?

Question

[Антон Середний]

Собственно всегда это делаю через "костыли". Хотелось бы посмотреть как делать правильно.

Вот пример кода сайта клиента:

КОД НА JSFIDDLE.NET

<div class="views-row views-row-3 views-row-odd">
  <div class="views-field views-field-field-products-images" style="border-bottom: 1px dotted #dedede;">       
    <div class="field-content">
    <img src="images/3.png" width="188" height="188">
    </div> 
  </div>  
  <div class="views-field views-field-title" style="height: 30px;"> 
   <div class="field-content">
     <b>Biggie Black</b>
   </div> 
 </div>  
 <div class="views-field views-field-title views-field-ul"> 
   <div class="field-content">
     <ul>
       <li>Материал: <span>S-Пластик</span></li>
       <li>Объем: <span>470 мл</span></li>
       <li>Высота: <span> 21 см</span></li>
       <li>Маса: <span>260 г</span></li>
     </ul>
   </div> 
 </div> 
 <div class="views-field views-field-field-products-price">        
  <div class="field-content">640 <span>грн.</span></div>
</div>  
 <div class="views-field views-field-basket">  
      <div class="field-content">
        <div class="basket_addto_basket_inner">
          <a data-product="4" href="#order" class="open addto_basket_button btn add ajax-processed">Заказать</a>
        </div>
      </div> 
    </div>   
</div>

Вот как выглядит сама верстка в итоге:



Как по клике на "заказать" получить урл или просто полностью хтмл-код картинки товара?

$('.open').click(function(event) {
   var img;
    img = $(this).find('.views-field-field-products-images').html(); // не находит
    img = $(this).closest('.views-field-field-products-images').html(); // не находит
    alert(img);
  });

Answer 1

[Alexander Pushkarev]

<div class="item">
	<dic class="image">
		<img src="...">
	</div>
	<dic class="price">
		1000
	</div>
	<div class="control">
		<a href="#" class="btn-order">Заказать</a>
	</div>
</div>

$('.btn-order').click(function(e) {
	e.preventDefault();
	
	var item  = $(this).parent().parent(),  // Получаем item. Он находится на 2 уровня выше, относительно нажатой кнопки. Поэтому и parent 2 раза
		img   = $('.image img', item),  // Ищем img в item
		price = $('.price', item), // Ищем price в item
		btn   = $(this);  // Тут возвращаем кнопку по которой кликнули
	
	console.log('item', item);	// выводим .item
	console.log('img', img);	// выводим .img
	console.log('price', price);	// выводим .price
	console.log('btn', btn);	// выводим .btn-order
});

Ну и этот код будет работать в пределах одного item

Comments

[Антон Середний]

Если не сложно, можно описать что конкретно вы делаете построчно? ну, кроме первых двух строчек

[Alexander Pushkarev]

Антон Середний: обновил ответ

[Антон Середний]

Alexander Pushkarev: спасибо, а если нужно подняться на 4 уровня выше, то можно писать так? var item= $(this).parents().eq(3)