Перебирать элементы dom, используя document.getElementsByTagName, передавать элемент как объект jquery - PullRequest
Новая
       9

Перебирать элементы dom, используя document.getElementsByTagName, передавать элемент как объект jquery

4 голосов
/ 26 июля 2011

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

Вот что я делал до сих пор. 

function iterDomFromStartElem = function(startElem, callBackFunc) {
    if (startElem !== null) {
        var items = startElem.getElementsByTagName("*");
        for (var i = 0; i < items.length; i++) {
            callBackFunc(items[i]);
        }
    }
}

Причина, по которой мне нужно перебирать dom с некоторого начального элемента, заключается в том, что наша команда недавно получила запрос на реализацию изменения размера шрифта; тем не менее, мы разработали сайт статически с размером шрифта во многих разных местах с использованием пикселей. Я понимаю, что более простой подход состоит в том, чтобы реорганизовать существующий код, установить статический размер шрифта в корне страницы и использовать em / проценты в другом месте, так что, если владелец бизнеса хочет иметь элемент управления изменением размера на страницах, все, что нам нужно сделать, это увеличить размер шрифта в одном месте. Этот рефакторинг потребовал бы много часов, и мне было поручено использовать это наименьшее количество человеко-часов.

Итак, у меня есть обратный вызов, определенный так, 

function resizeFont(startElem, scale) {
    iterDomFromStartElem(startElem, function(node) {
        // get current size of node, apply scale, increase font size
    }
}

Использование этого необработанного javascript будет работать, но у меня возникают проблемы с получением размера шрифта, если он объявлен внутри класса css.

Я знаю, что у jquery есть свойство css, и если бы у меня был объект jquery, я мог бы сделать $ (this) .css (....), поэтому

когда я вызываю callBackFunc (items [i]), как я могу преобразовать items [i] в ​​объект jquery, чтобы в моей функции обратного вызова я мог выполнять node.css (......)?

Полагаю, я мог бы сделать $ (items [i] .id), возможно, это было бы самым простым.

Есть ли более простой способ с помощью javascript определить размер шрифта, даже если этот размер шрифта объявлен в классе css и этот класс css присоединен к элементу?

1 Ответ

4 голосов
/ 26 июля 2011

Предисловие: я думаю, что вам лучше исправить проблему должным образом. Вы можете сэкономить час или два, используя ярлык, но это может стоить вам в долгосрочной перспективе.

А вот ваш актуальный вопрос:

как я могу преобразовать items [i] в ​​объект jquery, чтобы в моей функции обратного вызова я мог выполнять node.css (......)?

Если вы передадите необработанный объект DOM в $(), jQuery вернет обертку вокруг него. Вам не нужно идти через идентификатор.

Вы также можете получить экземпляр jQuery для всех элементов-потомков заданной начальной точки, например: 

var x = $("#starting_point *");

... хотя вы все равно бы создали много временных объектов, если бы потом перебрали его, как здесь: 

$("#starting_point *").each(function() {
    // Here, `this` is the raw DOM element
});

Вот пример зацикливания всех элементов в данной начальной точке с помощью jQuery, в данном случае показывая их тег и id (если есть) и превращая их в синий ( живая копия ): 

$("#start *").each(function() {
  display(this.tagName + "#" + (this.id || "?"));
  $(this).css("color", "blue");
});

Заметьте, я сказал под . Если вы также хотите включить #start, селектор изменится на #start, #start *.

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

CSS: 

.x13 {
  font-size: 13px;
}
.x17 {
  font-size: 17px;
}
.x20 {
  font-size: 20px;
}

HTML: 

<input type="button" id="btnBigger" value="Bigger">
<div id="start" class="x13">
  This is in 13px
  <p style="font-size: 15px">This is in 15px
    <span class="x17">and this is 17px</span></p>
  <ul>
    <li id="the_list_item" style="10px">10px
      <strong style="font-size: 8px">8px
        <em class="x20">five</em>
      </strong>
    </li>
  </ul>
</div>

JavaScript: 

jQuery(function($) {

  $("#btnBigger").click(function() {
    $("#start, #start *").each(function() {
      var $this = $(this),
          fontSize = parseInt($this.css("font-size"), 10);
      display("fontSize = " + fontSize);
      $this.css("font-size", (fontSize + 2) + "px");
    });
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
...