Как установить ширину и высоту динамически с помощью jQuery

tl; dr

Быстрое, полное решение, которое обрабатывает многозначные ключи и кодированные символы.

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})

Многострочный:

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

Что это за код ... «нуль-коалесцирование» , оценка короткого замыкания ES6 Назначения деструктурирования , Функции стрелок , Шаблонные строки

Пример:

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"


Подробнее ... о Vanilla JavaScript-решение.

Для доступа к различным частям URL-адреса используйте location.(search|hash)

Самое простое (фиктивное) решение

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • Ручки пустые ключи правильно.
  • Переопределяет несколько клавиш с найденным значением last .
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Многозначные клавиши

Простая проверка ключа (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
  • Теперь возвращает массивы вместо .
  • Доступ к значениям qd.key[index] или qd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Кодированные символы?

Используйте decodeURIComponent() для второго или оба расщепления.

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})

Пример:

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]

Fro m comments

* !!! Обратите внимание, что decodeURIComponent(undefined) возвращает строку "undefined". Решение заключается в простом использовании && , который гарантирует, что decodeURIComponent() не вызывается для неопределенных значений. (см. «полное решение» вверху.)

v = v && decodeURIComponent(v);

Если пустая строка пуста (location.search == ""), результат несколько вводит в заблуждение qd == {"": undefined}. Перед запуском функции синтаксического анализа рекомендуется проверить запрос:

if (location.search) location.search.substr(1).split("&").forEach(...)
66
задан Misha Moroshko 27 April 2010 в 14:48
поделиться

2 ответа

Вы можете сделать это:

$(function() {
  $("#mainTable").width(100).height(200);
});

В нем 2 изменения, теперь он использует .width () и .height () , а также запускает код на событие document.ready .

Без оболочки $ (function () {}) (или $ (document) .ready (function () {}) , если хотите), ваш элемент не может пока присутствует, так что $ ("# mainTable") просто не найдет ничего, чтобы ... ну, что-нибудь делать. Вы можете увидеть рабочий пример здесь .

100
ответ дан 24 November 2019 в 14:35
поделиться

Попробуйте следующее:

<div id="mainTable" style="width:100px; height:200px;"></div> 

$(document).ready(function() {
  $("#mainTable").width(100).height(200);
}) ;
7
ответ дан 24 November 2019 в 14:35
поделиться
Другие вопросы по тегам:

Похожие вопросы: