개별 클래스 이름에 '시작' 선택기 사용

개별 클래스 이름에 '시작' 선택기 사용

다음이 있는 경우:

<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를 통해 전체 클래스 속성을 문자열로 사용하는 것이 아니라 개별 클래스 이름에 술어 선택기를 사용하는 올바른 방법은 무엇입니까?클래스를 잡고 어레이로 분할한 다음 정규식으로 각 개별 클래스를 순환시키는 것이 문제입니까?아니면 더 우아하고 덜 장황한 솔루션이 있습니까?

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

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

저는 "사과"를 그들만의 수업으로 만드는 것을 추천합니다.다음을 사용하여 선택할 수 있으므로 가능하면 시작/끝을 피해야 합니다.div.apple훨씬 더 빠를 겁니다그것이 더 우아한 해결책입니다.작업을 더 단순하고 더 빠르게 할 수 있다면, 그것을 다른 클래스로 나누는 것을 두려워하지 마십시오.

여기서 가장 중요한 답변은 질문자의 특정 사례에 대한 해결 방법이지만, 개별 클래스 이름에 '시작'을 실제로 사용할 수 있는 솔루션을 찾고 있는 경우:

이 사용자 지정 jQuery 선택기를 사용할 수 있으며, 이를 사용자 지정 jQuery 선택기라고 합니다.:acp()"A 클래스 접두사"의 경우.코드는 이 게시물 하단에 있습니다.

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);
    }
});

제가 이것을 만든 이유는 제가 백엔드 컨트롤이 없는 웹사이트를 그리스몽키 해킹을 많이 하기 때문에 동적 접미사가 있는 클래스 이름의 요소를 자주 찾아야 하기 때문입니다.매우 유용했습니다.

이것은 접두사를 위한 것입니다.

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

이것은 시작을 위한 것이므로 '-' 문자를 안에 둘 필요가 없습니다.

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

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

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

이 경우 질문으로서 조쉬 스토돌라의 대답은 "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>

조쉬 하지 않을 입니다.
하기 입니다.

$('.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");

다른 사람을 돕는 것일 수도 있습니다 감사합니다.

사용해 보십시오.

$("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;
})

언급URL : https://stackoverflow.com/questions/2178416/using-starts-with-selector-on-individual-class-names