Можно ли вернуть значение, соответствующее частичному селектору в jQuery? - PullRequest
Новая
       35

Можно ли вернуть значение, соответствующее частичному селектору в jQuery?

3 голосов
/ 17 января 2012

Я кодировал функцию, которая работает, но это ужасно.Я почти уверен, что есть лучший способ сделать то, что я хочу, и он, вероятно, оказался очень уродливым, потому что я не очень хорош в javascript: D

У меня есть некоторые html-элементы, которые могут иметь класс с именем view-in-box или view-in-box-640-480.Если класс просто view-in-box, появится диалоговое окно с некоторыми значениями по умолчанию: ширина и высота, в противном случае он будет отображаться с шириной и высотой, указанной в имени класса.

Класс элементов html может выглядеть примерно так:: class='note comment ui-button view-in-box-300-200 footer star'.

То, что я до сих пор делал, - это выделение всех элементов, в которых есть view-in-box, с: 

$('body').delegate('[class*=view-in-box]','click', function(){

Затем я беру атрибут целого класса изациклите его, чтобы проверить, могу ли я найти view-in-box или нетВот (упрощенный) код: 

$('body').delegate('[class*=view-in-box]','click', function(){
    ...
    var class_array = $(this).attr('class').split(" ");
    for (var i = 0; i < class_array.length; i++) {
        if (class_array[i].search('view-in-box-') != -1) {
            box_text = class_array[i];
            break;
        }
    }

    if (box_text !== null) {
        box_array = box_text.split('-');
        ....
    }

    ....
    return false;
});

Так что мне было интересно, есть ли способ вернуться обратно прямо в мою функцию к тому, что соответствовало предикату view-in-box?Как например view-in-box или view-in-box-233-455.Или мне действительно нужно получить полный атрибут класса и разделить его.

Надеюсь, я в порядке, JavaScript сбивает меня с толку!Спасибо.

Ответы [ 3 ]

2 голосов
/ 17 января 2012

Вы должны использовать пользовательский атрибут data-* вместо имен классов для хранения этих данных.

Так что вместо: 

<div class="note comment ui-button view-in-box-300-200 footer star"></div>

Сделай себе одолжение и используй: 

<div class="note comment ui-button view-in-box footer star" data-size="300-200"></div>

Тогда вы можете просто использовать $(el).data('size'), чтобы получить значение с помощью jQuery.

1 голос
/ 17 января 2012

Регулярное выражение может быть использовано для упрощения вашего кода; Вы можете заменить строковые функции JavaScript (split, indexOf, search и т. д.) регулярным выражением: 

/(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;

// (?:^|\s) -- non-capturing group that matches beginning of string or white-space
// (-\S+)?  -- optional capturing group that match hyphen + one or more non-white-space characters
// (?:\s|$) -- non-capturing group that matches end of string or white-space

Пример: 

var rx = /(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;
rx.exec("view-in-box");                                            // ["view-in-box", undefined]
rx.exec("view-in-box-foobar ");                                    // ["view-in-box-foobar ", "-foobar"]
rx.exec("view-in-box-foo-bar");                                    // ["view-in-box-foo-bar", "-foo-bar"]
rx.exec("note comment ui-button view-in-box-300-200 footer star"); // [" view-in-box-300-200 ", "-300-200"]
rx.exec("view-in-boxXXXX");                                        // null
rx.exec("XXXXview-in-box");                                        // null
rx.exec("XXXX-view-in-box");                                       // null
1 голос
/ 17 января 2012
...