Как вы нацеливаетесь на html / css экземпляров функций уникально?

Question

Можете ли вы нацеливать новые экземпляры объекта уникально, не передавая им идентификатор в качестве параметра?

Если вы создаете новые объекты из конструктора и каждый экземпляр имеет доступ к некоторому html (презентации), хранящемуся как переменная в конструкторе, когда создаются новые экземпляры объекта и html выводится из переменной представления, как вы предназначаться для каждого из этих экземпляров уникальным способом? Как вы могли бы оформить один экземпляр иначе, чем другой?

function MyObj() {
  this.content = "<div class = 'someclass'>Some text </div>";
}

var newObj1 = new MyObj();
console.log(newObj1.content); //outputs Some text 

var newObj2 = new MyObj();
console.log(newObj2.content); //outputs Some text

Если вы хотите настроить таргетинг на CSS всех новых классов, вы можете использовать:

var target1 = $('.someclass').css('color,'orange');

Но как нацелить одно на другое?

Answer 1

Вы можете передать что-то уникальное для подтверждения каждого объекта. Ниже я передаю имя, которое будет добавлено к атрибуту elements class.

Обратите внимание, что если вы используете CSS в другом месте, это нормально, но если он используется только один раз, то почему бы не добавить id для уникального различения областей. То есть для этого и предназначен id.

function MyObj(name) {
  if(name != undefined) {
    this.content = "<div class = 'default " + name + "'>Some text </div>";
  } else {
    this.content = "<div class = 'default'>Some text </div>";
  }
}

var newObj1 = new MyObj('blue-rows');
console.log(newObj1.content); //outputs Some text 

var newObj2 = new MyObj('orange-rows');
console.log(newObj2.content); //outputs Some text

var newObj3 = new MyObj();
console.log(newObj3.content); //outputs Some text

var container = document.getElementById('container');

container.innerHTML += newObj1.content;
container.innerHTML += newObj2.content;
container.innerHTML += newObj3.content;

.default {
  color: red;
}

.blue-rows {
  color: blue;
}

.orange-rows {
  color: orange;
}

<div id="container">
</div>

Answer 2

Это зависит от того, как вы хотите настроить таргетинг на другой экземпляр. Один из вариантов - использовать селекторы :nth-child, :first-child или :last-child. Как пример:

$('.someclass:nth-child(even)').css('color','orange');
$('.someclass:nth-child(odd)').css('color','blue');
$('.someclass:nth-child(1)').css('color','green');
$('.someclass:first-child').css('color','red');