[jquery] 개별 클래스 이름에 ‘다음으로 시작’선택기 사용

Program / 글쓴이

다음이있는 경우 :

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

다음 선택기를 사용하여 처음 두 DIV를 찾을 수 있습니다.

$("div[class^='apple-']")

그러나 이것이 있으면 :

<div class="some-other-class apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

첫 번째 div의 클래스는 문자열로 반환되고 (제 생각에는) 실제로 ‘apple-‘로 시작하지 않고 ‘some-‘로 시작하기 때문에 두 번째 DIV 만 찾습니다.

이를 해결하는 한 가지 방법은 다음으로 시작하지 않고 대신 다음을 포함하는 것입니다.

$("div[class*='apple-']")

문제는 내 예에서 세 번째 DIV도 선택한다는 것입니다.

질문 : jQuery를 통해 전체 클래스 속성을 문자열로 사용하는 대신 개별 클래스 이름에 술어 선택자를 사용하는 적절한 방법은 무엇입니까? CLASS를 잡고 배열로 분할 한 다음 정규식을 사용하여 각 개별 항목을 반복하는 것이 문제입니까? 아니면 더 우아하고 덜 장황한 솔루션이 있습니까?

답변

“apple-“로 시작하는 클래스와 “apple-“이 포함 된 클래스

$("div[class^='apple-'],div[class*=' apple-']")

답변

“사과”자체 수업을 만드는 것이 좋습니다. using / ends-with를 선택하는 div.apple것이 훨씬 빠르기 때문에 가능하면 시작 / 종료를 피해야합니다 . 이것이 더 우아한 솔루션입니다. 작업이 더 간단하고 빠르다면 사물을 별도의 클래스로 나누는 것을 두려워하지 마십시오.

답변

이것은 접두사입니다

$("div[class^='apple-']")

이것은 시작을위한 것이므로 거기에 ‘-‘문자를 넣을 필요가 없습니다.

$("div[class|='apple']")

https://api.jquery.com/category/selectors/ 에서 jQuery 선택기의 다른 멋진 변형을 찾을 수 있습니다.

답변

여기에 가장 좋은 대답은 질문자의 특정 경우에 대한 해결 방법이지만 개별 클래스 이름에 실제로 ‘시작’을 사용하는 솔루션을 찾고 있다면 :

:acp()“A Class Prefix” 라고 부르는이 사용자 정의 jQuery 선택기를 사용할 수 있습니다 . 코드는이 게시물의 하단에 있습니다.

var test = $('div:acp("starting_text")');

이렇게하면 <div>해당 클래스가 클래스 속성 문자열의 시작 또는 다른 위치에 있는지 여부에 관계없이 지정된 문자열 (이 예에서는 “starting_text”)로 시작하는 클래스 이름이 하나 이상있는 모든 요소 가 선택 됩니다.

<div id="1" class="apple orange lemon" />
<div id="2" class="orange applelemon banana" />
<div id="3" class="orange lemon apple" />
<div id="4" class="lemon orangeapple" />
<div id="5" class="lemon orange" />

var startsWithapp = $('div:acp("app")');

그러면 요소 1, 2 및 3이 반환되지만 4 또는 5 는 반환 되지 않습니다 .

다음 :acp은 어디에나 넣을 수 있는 사용자 지정 선택기에 대한 선언입니다 .

$(function(){
    $.expr[":"].acp = function(elem, index, m){
          var regString = '\\b' + m[3];
          var reg = new RegExp(regString, "g");
          return elem.className.match(reg);
    }
});

백엔드 제어가없는 웹 사이트에 대해 GreaseMonkey 해킹을 많이했기 때문에 이것을 만들었습니다. 그래서 종종 동적 접미사가있는 클래스 이름을 가진 요소를 찾아야합니다. 매우 유용했습니다.

답변

이 시도:

$("div[class]").filter(function() {
    var classNames = this.className.split(/\s+/);
    for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].substr(0, 6) === "apple-") {
            return true;
        }
    }
    return false;
})

답변

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

이 경우 질문으로 Josh Stodola 대답은 정확합니다. “apple-“로 시작하는 클래스와 “apple-“을 포함하는 클래스

$("div[class^='apple-'],div[class*=' apple-']")

하지만 요소에 이와 같은 여러 클래스가 있으면 

<div class="some-class apple-monkey"></div>
<div class="some-class apple-horse"></div>
<div class="some-class cow-apple-brick"></div>

그러면 Josh Stodola의 솔루션이 작동하지 않습니다. 이와 같은 작업
을 수행해야합니다.

$('.some-parent-class div').filter(function () {
  return this.className.match(/\bapple-/);// this is for start with
  //return this.className.match(/apple-/g);// this is for contain selector
}).css("color","red");

다른 사람에게 도움이 될 수 있습니다.

답변

요소에 여러 개의 클래스가있는 경우 “[class ^ = ‘apple-‘]”이 작동하지 않습니다. 예 : 

<div class="fruits apple-monkey"></div>