JQuery выбрать элемент, который соответствует одному из имен классов другого элемента

Question

У меня есть пара элементов, один из которых может иметь любое количество имен классов - один из них будет общим.

например:

<div class='div1 someClassname someOtherClassname'></div>
<div id='container'>
  <div class='div1'>
  </div>
</div>

Итак, у меня есть событие, которое запускается на .someClassname, но мне нужно что-то сделать с #container .div1. Как выбрать #container .div1, используя только то, что я могу почерпнуть из .someClassname при возникновении события?

Вот то, с чем я экспериментирую:

$('.someClassname').click(function(){
    var classes = $(this).attr('class');  // 'div1 someClassname someOtherClassname'
    var otherElem = $('#container').children().filter(classes); //empty jQuery object
});

Я не могу разобрать имена классов, так как не знаю, какой именно класс я ищу, или какие классы я не ищу, так как число и имена меняются в зависимости от.

Любые указатели очень ценятся

Answer 1

попробуйте

$('.someClassname').click(function(){
    var classes = $(this).attr('class').split(" ").join(",.");
    alert(classes);
    $('.'+classes).not(this).each(function(){
    alert($(this).text());
    });

});

скрипка: http://jsfiddle.net/3rVjN/

Answer 2

Вы можете сделать что-то вроде этого:

$('.someClassname').click(function(){
    var classes = $(this).attr('class').split(/\s+/);
   $.each(classes , function(index, value) { 
        console.log($('#container').find("."+value));
});

});

образец

Answer 3

У меня были похожие проблемы несколько дней назад. Это сработало для меня:

// all your element classes 
allClasses = $('yourElement').attr("class").split(/\s+/);

// retrieve desired classes
for (var j = 0; j < allClasses.length; j++) {
   if (allClasses[j] === 'class1' || allClasses[j] === 'class2' || allClasses[j] === 'class3' ) {
    classes = classes+" "+allClasses[j]
    }
   }        
console.log(classes)

Я использую это, если хочу извлечь class1,2,3 из элемента, который может содержать любое количество классов с неизвестными именами.

Может быть, помогает.

Answer 4

Это код, который вы ищете:

    $('.someClassname').click(function(){
    var classes = $(this).attr('class');  // 'div1 someClassname someOtherClassname' 

    var arr = classes.split(" ");
    var filter = [];              

    $.each(arr, function(index, item){
        filter.push("."+item)
    })                      

    var filterStr = filter.join(",")

    var otherElem = $('#container').children().filter(filterStr);  
});       

Ошибка, которую вы имели, состоит в том, что классы - это строка имен классов.Метод jQuery .filter () принимает селектор.

Answer 5

Вы не должны злоупотреблять class за это.

Добавить дополнительный атрибут, например, HTML5 data-target="div1" для .someClassName элементов.

<div data-target="div1" class="div1 someClassname someOtherClassname"></div>
<div id="container">
  <div class="div1">
  </div>
</div>

и затем в коде:

$('.someClassname').click(function() {
    var target = $(this).data('target');
    var other = $('#container').children('.' + target);
});

Если нет фактических стилей CSS, связанных с div1, тогда я бы предложил вообще не использовать стили и поместить тег id в целевой div - он будет работать быстрее для сопоставления по ID, чем для сопоставления по класс.

Answer 6

Я думаю, вы почти все поняли. Просто .split classes var с , добавьте . к каждому элементу массива и затем присоедините массив обратно с ,, чтобы вы получили .div1, .otherclassname, etc.. Вы можете использовать эту строку в качестве селектора.

Предполагается, что вы хотите логическое ИЛИ в отношении классов. В противном случае (если вы хотите AND), не объединяйтесь с ,, просто склейте элементы.

Answer 7

Если я правильно понимаю, вам нужно будет использовать split в классах и отформатировать ваш селектор с точками и запятыми, если необходимо. Попробуйте, если вы все еще испытываете затруднения, я выложу тестовый код.

Answer 8

Если я правильно понимаю ваш вопрос, это должно помочь:

var classes = $(this).attr("class").split(/\s+/);
var obj = $();
for (var i = 0; i < classes.length; i++) { 
    obj = obj.add($("#container ." + classes[i]));
} 

Теперь obj должен содержать ваш объект