Создание объекта jQuery внутри цикла for массива с именами классов - PullRequest
0 голосов
/ 29 марта 2019

Я пытаюсь динамически добавлять классы при вызове функции и сохранении их в массиве, а затем создавать объекты jQuery для каждого элемента в массиве (буду использовать его с .clone () далее).Однако объекты jQuery возвращаются как неопределенные.Чего мне не хватает?

JS:

jQuery.fn.cloneInfo = function (myClasses) {
            $this = jQuery(this);
            myClassArray = [];


            var splitClasses = myClasses.split(' ');
            jQuery.each(splitClasses, function(){
                myClassArray.push(this);    
            });



            var i;
            for (i = 0; i < myClassArray.length; i++) {
                thisClass = myClassArray[i];
                alert(thisClass); //THIS RETURNS .my-class-1 & .my-class-2
                $thisClone = jQuery(thisClass);
                alert($thisClone.attr('class')); //THIS RETURNS UNDEFIENED
            }
        }

        jQuery('.wrap').on('click', '#button', function(e) {
        e.preventDefault();
            $this = jQuery(this);
            jQuery(this).cloneInfo('.my-class-1 .my-class-2');

        });

1 Ответ

0 голосов
/ 29 марта 2019

По сути, похоже, что это цели:

  1. Нажмите кнопку:

    $('button').on('click', function() {...});
    
  2. Добавление нескольких классов в данную коллекцию (в OP эта часть нечеткая)

    $(collection).addClass(cList)
    
  3. Возвращает массив (OP не ясно, из чего состоит этот массив)

    $(collection).toArray()
    
  4. Итак, если все предположения верны:

    $('button').on('click', function() {
      var cArr = $(collection).addClass(cList).toArray();
      console.log(cArr)'
    });
    

Следующая демонстрационная программа - плагин для повторного использования кода выше. Плагин оборачивается в обработчик событий щелчка вместо того, чтобы включать обработчик событий в сам плагин.

Плагин ......: .classArray()
Подпись: $(collection).classArray(cList);
Параметры
collection [String]: любой действительный селектор
cList [DOMTokenString]: разделенный пробелами список classNames
Примечание: CSS не является обязательным и не требуется.

$.fn.classArray = function(cList) {
  this.addClass(cList);
  return this.toArray();
}

$('button').on('click', function() {
  var cArr = $('li, p, a').classArray('c1 c2');
  //var cArr = $('li, p, a').addClass('c1 c2').toArray();
  console.log(cArr);
});
*:after {
  content: ' 'attr(class)
}

.as-console-wrapper {
  width: 60%;
  margin-left: 40%
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}
<header>
  <button>classArray</button>
</header>
<main>
  <header>
    <nav>
      <ol>
        <li><a href='#/'>LINK</a></li>
        <li><a href='#/'>LINK</a></li>
        <li><a href='#/'>LINK</a></li>
      </ol>
    </nav>
  </header>
  <article>
    <h1>MAIN TITLE</h1>
    <p>CONTENT</p>
  </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...