Я не могу пройти DOM от <img>до <td>...? - PullRequest
Новая
       29

Я не могу пройти DOM от <img>до <td>...?

0 голосов
/ 28 января 2012

Обзор

Я очень ценю любую помощь с этим. Я уверен, что это "легко", но я не могу понять это. Мне приходится использовать селекторы, чтобы выбрать уникальное имя файла изображения. Затем мне нужно заменить <td>, что на один столбец справа от <td>, в котором находится <img>.

У меня есть текущий веб-сайт, и я также сделал диаграмму, чтобы помочь объяснить это лучше. Проверьте следующие две ссылки: Сайт: http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks Диаграмма: http://goo.gl/Q3Uif

Проблема

Ссылка на сайт выше не имеет проблемы. У нас есть специальная модификация "франшизы" в нашей oscommerce. Только клиенты с определенными учетными записями могут войти туда, где мне нужна помощь. Сделанная мной диаграмма описывает это достаточно просто. Чтобы у вас были все «кусочки» моей «загадки», вот как я делаю .replaceWIth() для основного сайта. Этот пример для верхнего ряда ... У меня есть один из них для каждого ряда, который мне нужно изменить. 

 $("a[href$=/Premium-Security-Laser-Check].smallTextLink").parent()
 .replaceWith('<td class="productListing-data" style="border-left:1px solid #FFF; border-top:1px solid #FFF; border-bottom:1px solid #808080; border-right:1px solid #808080;"><div class="leftSide"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="smallTextLink">Premium Security Laser Check</a><ul style="line-height: 1.5em; font-size: 11px; margin-left: -15px;"><li style="color:red;"><strong>Buy 500 Checks, Get 500 Free Special!</strong></li><li>More than 8 security features</li><li>Thermochromic Ink</li><li>8.5" x 11" sheet 24lb MICR paper</li><li>2 perforations @ 3.5" x 7"</li></ul><div class="moreInfoButtonsNew"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="positive"><img src="http://writeguard.com/catalog/images/new_layout/icons/information.png" alt=""/>More Info</a></div></div><div class="rightSide"><p class="ourPrice">Starting At:<br>$39.50</p></div></td>');

Полагаю, это неэффективно. Но только из-за этой проблемы, с которой я столкнулся сейчас, мне нужно уметь делать то, что я описал сверху. Выберите <img> по имени файла, затем перейдите в DOM, чтобы я мог использовать .replaceWith() для достижения того же, что я описал выше. Я пробовал много разных селекторов, но ни один из них не работает. Это всегда заканчивается созданием табличных данных внутри табличных данных внутри табличных данных, пока страница не станет буквально 10 футов в длину. Я не знаю, где я иду не так.

Я могу с радостью предоставить более подробную информацию, если это необходимо. Я, очевидно, не очень опытен с jQuery, и мои методы, вероятно, кошмар. Я хочу узнать правильный и эффективный способ программирования с помощью jquery в ближайшее время. СПАСИБО ОГРОМНОЕ ЗА ВАШУ ПОМОЩЬ!

Ответы [ 2 ]

0 голосов
/ 28 января 2012

Селектор должен быть: 

$('a.smallTextLink[href$="Premium-Security-Laser-Check"]')

И структура вашей таблицы, у вас есть: 

<tr>
  <td>
    <div>
      <a href='....'>
      ..
      ..

Таким образом, ваш оператор jQuery должен найти родительский элемент, который является тд.parent () возвращает div.Вы хотите, чтобы родители ('td: first') захватили первого родителя, который является элементом td. 

$('a[href$="Premium-Security-Laser-Check"].smallTextLink').parents('td:first')
  .replaceWith(....)
0 голосов
/ 28 января 2012

Мне кажется, проблема в вашем селекторе.

Я не верю, $("a[href$=/Premium-Security-Laser-Check].smallTextLink") на самом деле что-нибудь схватит.

Попробуйте это: 

$('a.smallTextLink[href$="Premium-Security-Laser-Check"]').click(function()
{
    alert('clicked the security laster check small text link');
});

Если это сработает, тогда вы сможете сменить селектор и получить замену.

$('a.smallTextLink[href=/Premium-Security-Laser-Check]').parent() .replaceWith('<td class="productListing-data" style="border-left:1px solid #FFF; border-top:1px solid #FFF; border-bottom:1px solid #808080; border-right:1px solid #808080;"><div class="leftSide"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="smallTextLink">Premium Security Laser Check</a><ul style="line-height: 1.5em; font-size: 11px; margin-left: -15px;"><li style="color:red;"><strong>Buy 500 Checks, Get 500 Free Special!</strong></li><li>More than 8 security features</li><li>Thermochromic Ink</li><li>8.5" x 11" sheet 24lb MICR paper</li><li>2 perforations @ 3.5" x 7"</li></ul><div class="moreInfoButtonsNew"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="positive"><img src="http://writeguard.com/catalog/images/new_layout/icons/information.png" alt=""/>More Info</a></div></div><div class="rightSide"><p class="ourPrice">Starting At:<br>$39.50</p></div></td>');

...