JQuery Script иногда работает, а иногда нет

Question

JQuery Script иногда работает, а иногда нет

0

ОК, поэтому у меня есть этот скрипт...

    jQuery(document).ready(function(){
      var tabs = ["tab7", "tab9", "tab10", "tab11", "tab17", "tab25"];
      jQuery.each(tabs, function(index, value){
        var el = $("#"+value+" a");
        var html = el.html().split(" ");
        html = html[0] + "<br>" + html.slice(1).join(" ");
        el.html(html);
        el.css({"line-height" : "19px","text-align" : "center","padding-top" : "20px","height" : "58px"});
      });
    });

Он добавляет aa разрыв строки между элементами nav с двумя словами. Но иногда это затрагивает subnav, а иногда это не так. Он может работать или не работать на любой странице сайта. После обновления браузера это может повлиять или не повлиять на subnav. Просмотрите снимок экрана обеих версий. но он переходит к перепутанной версии намного больше, чем к правильной версии. Это что-то в моем скрипте влияет на это? Или есть что-то, что я могу добавить, чтобы это не повлияло на subnav

В случае, если это помогает здесь, это HTML для LI элемента nav.

<li id="tab7" class="hasChildren">
    <a href="/s.nl/c.1334893/sc.7/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a>
    <ul class="submenu">
        <li><a href="/s.nl/c.1334893/sc.7/category.86/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
        <li><a href="/s.nl/c.1334893/sc.7/category.87/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
    </ul>
</li>

Travis 04 окт. 2013, в 17:23

Источник

0

Есть ошибки на консоли?
melancia 04 окт. 2013, в 14:40
0

Нету никаких ошибок в консоли вообще. Не думал посмотреть там но чисто
Travis 04 окт. 2013, в 14:46
2

попробуйте $("#"+value).children("a") вместо $("#"+value+" a")
Abraham Uribe 04 окт. 2013, в 14:47
0

Я думаю, что вы решили мою проблему @AbrahamUribe! Я все еще в стадии обучения, в чем разница между 2?
Travis 04 окт. 2013, в 14:52
2

.children перемещается только на один уровень вниз по дереву DOM и "#id a" получает все элементы внутри элемента id http://api.jquery.com/children/
Abraham Uribe 04 окт. 2013, в 14:55
0

Удивительно, я ценю помощь и объяснение! Ура, надеюсь, у вас будут отличные выходные!
Travis 04 окт. 2013, в 14:59
1

Почему вы переключаетесь между jQuery и $ ? Это одно и то же, выберите один и придерживайтесь его. Согласованность очень важна для создания читаемого, отлаживаемого кода.
meagar♦ 04 окт. 2013, в 15:49

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

netsuite

1 ответ

Ещё вопросы

Нету никаких ошибок в консоли вообще. Не думал посмотреть там но чисто
попробуйте $("#"+value).children("a") вместо $("#"+value+" a")
Я думаю, что вы решили мою проблему @AbrahamUribe! Я все еще в стадии обучения, в чем разница между 2?
.children перемещается только на один уровень вниз по дереву DOM и "#id a" получает все элементы внутри элемента id http://api.jquery.com/children/
Удивительно, я ценю помощь и объяснение! Ура, надеюсь, у вас будут отличные выходные!
Почему вы переключаетесь между jQuery и $ ? Это одно и то же, выберите один и придерживайтесь его. Согласованность очень важна для создания читаемого, отлаживаемого кода.

mikakun · Answer 1 · 2013-10-19T04-56-00.000Z

это работает так же, как children и, возможно, быстрее:

var el = $("#"+value+" > a");

или

var el = $("#"+value).find("> a");

но ваше использование идентификаторов неэффективно, вы должны обратиться к классу, тогда, если вам нужно сохранить данные с помощью узла, используйте атрибут данных hml5:

<li data-tabid="7" class="tab hasChildren">
<a href="/s.nl/c.1334893/sc.7/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a>
<ul class="submenu">
    <li><a href="/s.nl/c.1334893/sc.7/category.86/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
    <li><a href="/s.nl/c.1334893/sc.7/category.87/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
</ul>
</li>

JS

jQuery(function($,undefined){
  var $tabs =$(".tab");
  $tabs.each(function(){
    var $el = $(this).find(">a");
    var html = $el.html().split(" ");
    $el.html(html[0] + "<br>" + html.slice(1).join(" "))
       .css({"line-height" : "19px","text-align" : "center","padding-top" : "20px","height" : "58px"});
  });
});

наконец, переместите css-строку в файл css внутри класса

 .twolines {line-height: 19px; //...

затем вместо .css(... .hadClass("twolines")

первые легкие шаги для аккуратного кода и элегантности... g'luck